低版本element el-tree不支持复选框禁用功能的解决方法

      申请博客已经一年多了，但是就是养不成写博客的习惯，因为在工作中遇到的问题总是懒于总结，也嫌麻烦。久而久之，之前遇到的技术难点就会忘记，怎么解决的、是怎样的一个思路，全然需要很费劲的去想。人的大脑又不是机器，三个诸葛亮也赛不过一个烂笔头，所以经过深刻的教训，决定写博客，记录在开发过程中遇到的一些坑和解决方案，方便日后返回来查看，好了，废话不多说了，直接说我遇到的问题吧！

　　公司需要在现有的平台基础上开发一个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)
　　　　　　}
　　　});
}

 第一次写博客，有好多不足的地方，望大家见谅！我会多多加油的！

转载于:https://www.cnblogs.com/lxbwxj/p/9267379.html