Element UI tree 回显问题

Part.1 问题

写项目时遇到一个棘手的问题，在作关于权限功能时，点击修改须要显示角色本来对应的权限。涉及到了 tree 组件回显，可是有一个很尴尬的问题：tree 组件只要父节点选中，那么子节点就会所有被选中，这是咱们不肯意看到的，可能你会说，取消父子联动属性不就行了，但是咱们也须要在子节点被选中时，父节点保持半选中状态。

Part.2 思路

在仔细看完 https://element.eleme.cn/#/zh-CN/component/tree#fang-fa   Element -UI 的官方文档后会发现很关键的两个方法：

 

  如今，咱们该怎么进行呢？ 先说一下我本身的思路，然后会逐一详解：

  步骤：

          第一步： 建立一个标识数组

          第二步： 将上述两个方法返回的数组与建立的标识数组进行合并，造成一个数组，传递给后台

          第三步： 回显时，以本身的标识数组的值为分割点，将后面的值所有删除

  详解：

         第一步 建立一个标识数组很是简单，如我建立的数组：signCode: [9999]

         第二步 三个数组进行合并个人写法以下：        

  let empowerTreeFrom = _that.$refs.empowerTreeFrom; //  empowerTreeFrom 为本身为 tree 组件定义的 ref 的值

  empowerTreeFrom.getCheckedKeys().concat(_that.signCode, empowerTreeFrom.getHalfCheckedKeys())  // 数组合并关键方法  concat

 

 

         第三步 回显时，返回的数据：

                     

 

      接下来，获取整个 idList 数组进行条件分割，个人方法： 

      

let filterId = getIdList.indexOf(_that.signCode[0]);  // 获取 标识数组元素 当前索引
getIdList.splice(filterId, getIdList.length - filterId); // 利用 splice 方法 从当前索引处开始切割，切割个数为  getIdList.length - filterId
empowerCheckedKeys = getIdList // 根据 getIdList 数组的值进行选中

 

完成！！！