el-tree 设置与上级严格关联、下级不严格关联

element-ui el-tree 设置与上级严格关联、下级不严格关联

先看效果：

应用场景：

动态路由权限配置，菜单和按钮在一颗树内显示，要求按钮可以不被勾选（按钮一定为叶子节点），即叶子节点可以不严格关联
此时我们的tree需要设置node-key、check-strictly为true,

实现逻辑：

监听tree的check事件和treesetChecked方法
tips：tree的数据（data）每级需要有上级的父节点id字段

实现方法

1.组件设置，如果返回的数据字段与tree的指定字段不相同，通过props设置

    <el-tree
      :data="treeData"
      node-key="id"
      show-checkbox
      check-strictly
      ref="tree"
      @check="hanleCheck"
    ></el-tree>

2.监听treecheck方法，这里我们设置上级id的字段为parentId

这里提供一个后端接口提供的数据格式：

 如上图所示，通过parentId来判断当前节点是否有上级节点

比如说，当前的按钮是否有上级菜单

或者说，当前菜单是否还有上级菜单

hanleCheck(data,node){
    const  _this = this
    // 获取当前节点是否被选中
    const isChecked = this.$refs.tree.getNode(data).checked
   // 如果当前节点被选中，则遍历上级节点和下级子节点并选中，如果当前节点取消选中，则遍历下级节点并取消选中
    if(isChecked){
        // 判断是否有上级节点，如果有那么遍历设置上级节点选中
        data.parentId &&  setParentChecked(data.parentId)
        // 判断该节点是否有下级节点，如果有那么遍历设置下级节点为选中
        data.children && setChildreChecked(data.children,true)
     }else{
       // 如果节点取消选中，则取消该节点下的子节点选中
        data.children && setChildreChecked(data.children,false)
      }
      function setParentChecked(parenId){
          // 获取该id的父级node
          const parentNode = _this.$refs.tree.getNode(parentId)
         // 如果该id的父级node存在父级id则继续遍历
           parentNode && parentNode.data && parentNode.data.parentId && setParentChecked(parentNode.data.parentId)
                  
          //  设置该id的节点为选中状态
          _this.$refs.tree.setChecked(parenId,true)
      }
      function setChildreChecked(node,isChecked){
        node.forEach(item => {
          item.children && setChildreChecked(item.children,isChecked)
          _this.$refs.tree.setChecked(item.id,isChecked)
        })
      }
    
}

 点击这里可以查看原文章