Tree 树形控件根据code过滤节点（Element+Vue）

项目场景：

权限控制中根据登陆账号已有权限code 渲染tree的结构树。从而实现下级权限不能高于本级权限

解决方案：

DOM

   <el-tree
     :data="menuData"
     show-checkbox
     default-expand-all
     node-key="id"
     ref="tree"
     :props="defaultProps"
     @check="onCheck"
   >
   </el-tree>

Data

   menuData:[],
   code:[]

js 递归便利

此方法删除掉一个元素后，数组的索引会发生变化，造成程序异常。

  this.setDisabled(this.menuData, this.code). //使用

   // 通过code对权限结构树进行过滤
  setDisabled (treeData, keys) {
    const loop = (data) => {
       data.forEach((item, index) => {
         if (!keys.includes(item.id)) {
           // item.disabled = true
           data.splice(index, 1)
         }
         if (item.children && item.children.length) {
           loop(item.children)
         }
       }) 
     }
     loop(treeData)
   }

解决方案：

   this.setDisabled(this.menuData, this.code). //使用
 
    // 通过code对权限结构树进行过滤
   setDisabled (treeData, keys) {
     const loop = (data) => {
        let i = data.length
        while (i--) {
          if (!keys.includes(data[i].id)) {
            // item.disabled = true
            data.splice(i, 1)
          }
          if (data[i] && data[i].children && data[i].children.length) {
            loop(data[i].children)
          }
        }
      }
      loop(treeData)
    }

博主原创作品！！！！