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

 

完成！！！