标签：判断 多次 会同 tftpd dea turn show 放弃 大脑
申请博客已经一年多了，但是就是养不成写博客的习惯，因为在工作中遇到的问题总是懒于总结，也嫌麻烦。久而久之，之前遇到的技术难点就会忘记，怎么解决的、是怎样的一个思路，全然需要很费劲的去想。人的大脑又不是机器，三个诸葛亮也赛不过一个烂笔头，所以经过深刻的教训，决定写博客，记录在开发过程中遇到的一些坑和解决方案，方便日后返回来查看，好了，废话不多说了，直接说我遇到的问题吧！
公司需要在现有的平台基础上开发一个FTP功能，就是前端需要一个树形结构供用户勾选，然后发送给后台，且该树形结构是懒加载的，点击一个节点同时向后台请求它的子树。没有犹豫，就选择用element 的el-tree，因为该平台一直在用element,最初打算在每个树节点加一个复选框，此属性为show-checkbox，和加上一个lazy和load树形实现懒加载。需求是展开到最后一级子节点时可以勾选文件，但此时有一个问题，展开父节点时也会同时勾选并且发送多次请求，无法正确的展开到最后一级，然后我想把父节点的树全部禁用，然后当加载到最后一级时取消最后一级的禁用，可以勾选。然而没想到的是项目用的element版本过低，根本不支持el-tree的禁用状态，然后经过深扒el-tree的祖宗三代，终于找到了解决方案，方案是直接放弃show-checkbox复选框的属性，加上一个监听树展开事件@node-expand，每当展开树时，都用一个变量接收住当前组件实例。
同时在load方法时，判断是否是最后的子节点，这个由后台传过来的变量判断，若是最后的子节点则给该子节点加上showCheckbox=true;
至此，el-tree的功能基本实现，默认树节点没有复选框，每当点击加载判断子树若是最后一级则给该节点加上复选框，大体思路就是这样。（是不是最后一级后台会同时发送给前端）
load方法如下：
loadNode(node, resolve) {
//置空需要接受的子组件数组
this.acceptVueComp=[];
if (node.level === 0) {
//显示一级目录
return resolve([{ currentdir: this.firstDir,previousdir:‘‘,leaf:false}]);
}else if(node.level===1){
var secondArr=[];
this.secondDir.forEach((obj)=>{
secondArr.push({currentdir:obj.filename,previousdir:this.firstDir,leaf:!obj.isDir});
if(!obj.isDir){
//收集最后一级的文件
this.saveFalseArr.push(obj.filename);
}
});
setTimeout(()=>{
this.acceptVueComp.$children.forEach((VueComp)=>{
//若是最后一级文件则显示复选框
if(VueComp.node.data.leaf){
VueComp.showCheckbox=true;
}
});
},0)
//显示二级目录
return resolve(secondArr);
}
var isTrue=false;
// //判断是否是文件，若是文件则返回
this.saveFalseArr.forEach((val)=>{
if(val==node.data.currentdir){
isTrue=true;
resolve([]);
}
});
if(isTrue) return;
var dataObj={
// username: this.ftpForm.username, //不需前端传递用户名
currentdir: node.data.previousdir,
nextdir: node.data.currentdir
}
this.$http.post(Vue.api.root + ‘artifact/version/getftpdir‘,dataObj)
.then(function(resp) {
if(resp.data.data==null){
this.$notify({ title: resp.data.success ? ‘成功‘ : ‘失败‘, message: resp.data.info, type: resp.data.level });
return;
}
//判断请求回来的子文件是否为空，若为空则给出提示
if(resp.data.data.dirlist.length>0){
var nodeArr=[];
resp.data.data.dirlist.forEach((obj)=>{
nodeArr.push({currentdir:obj.filename,previousdir:resp.data.data.currentdir,leaf:!obj.isDir});
if(!obj.isDir){
//收集最后一级的文件
this.saveFalseArr.push(obj.filename);
}
});
resolve(nodeArr);
setTimeout(()=>{
this.acceptVueComp.$children.forEach((VueComp)=>{
//若是最后一级文件则显示复选框
if(VueComp.node.data.leaf){
VueComp.showCheckbox=true;
}
});
},0)
}else{
//若是目录则里面是空，则给出提示
resolve([]);
setTimeout(()=>{
this.acceptVueComp.node.data.currentdir=this.acceptVueComp.node.data.currentdir+‘ （此目录为空！）‘
},0)
}
});
}
第一次写博客，有好多不足的地方，望大家见谅！我会多多加油的！
低版本element el-tree不支持复选框禁用功能的解决方法
标签：判断 多次 会同 tftpd dea turn show 放弃 大脑
原文地址：https://www.cnblogs.com/lxbwxj/p/9267379.html
