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

应用场景：

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

截屏2020-04-17下午11.20.04.png

截屏2020-04-17下午11.23.54.png

实现逻辑

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

实现方法

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

2.监听treecheck方法，这里我们设置上次id的字段为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.data.parentId && setParentChecked(setParentChecked)
          //  设置该id的节点为选中状态
          _this.$refs.tree.setChecked(parenId,true)
      }
      function setChildreChecked(node,isChecked){
        node.forEach(item => {
          item.children && setChildreChecked(item.children,isChecked)
          _this.$refs.setChecked(item.id,isChecked)
        })
      }
    
}

案例

demo

屏幕录制2020-04-18上午12.24.07.gif