递归树处理，配合vue的vueTreeselect组件使用

在项目中经常会使用到tree，并且需要对递归树进行操作。

在vue项目中，使用vue-treeselect插件（https://vue-treeselect.js.org/）

使用中遇到的问题：

　　1、接口返回的数据格式中，children:null，也就是说哪怕已经是最子节点，children为空，接口依旧会存在这个属性。由于这个属性的存在，导致节点前存在一个小三角符号，展开又是空子节点。因此页面需要对children为空的数据属性进行递归判断删除。

　　

　　解决方法：

递归函数的具体写法：
diGuiTree(item) {  //递归便利树结构
  item.forEach(item => {
    item.children === '' || item.children === undefined || item.children === null ?　　　　　　　　
      delete item.children : this.diGuiTree(item.children);
  })
},

 2、接口返回的数据格式中，并不包括禁止选择的项目。由于项目需要根据当前选择的节点，在编辑父节点的时候禁止下选择当前的节点及其子节点。根据vue-treeselect的数据规则，isDisabled = false禁止选择。因此需要递归判断当前tree ID是否等于选择的节点ID

 

递归函数的具体写法：

diGuiTreeEdit(item,compID) {  // 编辑情况下，禁止选择当前节点及其子节点
 let data = item;
 let treeAry = [];
 for (let i in data) {
   let v = data[i];
   let node = {};
   if (v === null || v === undefined) {}
   else {
     if (v.children && v.children.length > 0) {
       if (v.id == compID) {
         node.isDisabled = true;
       } else {
         node.isDisabled = false;
       }
       node.id = v.id;
       node.label = v.label;
       node.name = v.name;
       node.children = this.diGuiTreeEdit(v.children, compID);
       treeAry.push(node);
     } else {
       if (v.id == compID) {
         node.isDisabled = true;
       } else {
         node.isDisabled = false;
       }
       node.id = v.id;
       node.label = v.label;
       node.name = v.name;
       treeAry.push(node);
     }
   }
 }
 return treeAry;
},

 

转载于:https://www.cnblogs.com/luoxuemei/p/9667672.html