低版本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)
　　　　　　}
　　　});
}

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