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 數組的值進行選中

 

完成！！！