關於elementUI樹狀結構的bug

腳踩空了_做了前端發表於2019-04-17
原文網址 : https://juejin.im/post/5cb70f816fb9a068b80d5d12
UI

之前在寫管理後臺的許可權控制這一塊的時候，使用的是element的樹元件，當時還是隻做到了選單的許可權，最近才開始做按鈕的許可權，由於需求不斷，總是有新功能，所以就要不斷新增按鈕，這個時候就發現了一個問題。大概闡述一下我們的業務場景

關於elementUI樹狀結構的bug
將選單側邊欄按照如圖的形式新增對應結構，在最後一級新增按鈕，然後根據建立好的樹形結構去給角色分配對應許可權

關於elementUI樹狀結構的bug
好，就是這樣，這遇到的問題是關乎element的tree選中狀態的方式，如果的個人會員這個節點是未選中的，因為子節點不是全部都選中，當子節點全部選中的時候，父節點才會選中，所以某個角色擁有某個選單的全部許可權的時候，就需要選中父節點，然後子節點就全部選中了，這個時候提交，自然就會把父節點的id帶過去，此時這個選單加了個功能，多了個按鈕，在上個圖片對應的個人會員的位置新增了一個按鈕，這個時候再開啟配置許可權的頁面時候，由於之前的父節點是選中的，所以後臺也會把父節點返回來，好，問題就來了，我們新新增的按鈕其實是沒有選中的，但是在頁面上呈現的狀態卻是選中的，一開始的解決辦法就是直接點儲存，把這個傳上去就好了。不過這顯然不是長久之計，為了合情合理，還是要把這個問題解決掉。一開始的思路就是遍歷樹，但是由於複雜度太高，我們的許可權有300多個，而且當前的角色所有許可權是個一維陣列

    var arr = [
        {
            menuId: 1,
            name: "系統管理",
            parentMenu: null
        },
        {
            menuId: 2,
            name: "系統管理",
            parentMenu: null
        },
        {
            menuId: 3,
            name: "系統管理",
            parentMenu: 1
        },
        {
            menuId: 4,
            name: "系統管理",
            parentMenu: 1
        },  {
            menuId: 5,
            name: "系統管理",
            parentMenu: 2
        },
        {
            menuId: 6,
            name: "系統管理",
            parentMenu: 5
        },
        {
            menuId: 7,
            name: "系統管理",
            parentMenu: null
        }
    ]
複製程式碼

類似於這種，所以由於有些父節點不在，所以不能構成相應的樹。這個時候，後臺大佬，突然來了一句，用hashmap不就行了，聽見了hashmap好像一下子明白了什麼。然後，將當前角色對應的許可權資料序列化成了一個id為key，value為children陣列的一個物件，方法非常簡單，

        getNewTree(arr) {
          const allParentId = {}
          arr.forEach(item => {
            if (item.parentId) {
              let flag = false
              Object.keys(allParentId).forEach(itemA => {
                if (itemA == item.parentId) {
                  flag = true
                }
              })
              if (flag) {
                allParentId[item.parentId].push(item)
              } else {
                allParentId[item.parentId] = []
                allParentId[item.parentId].push(item)
              }
            }
          })
          return allParentId
        },
複製程式碼

得到的資料結構是這樣的

關於elementUI樹狀結構的bug
這樣，我們只需要比較當前角色的許可權資料序列化成的物件與所有許可權序列化成的物件做對比，

關於elementUI樹狀結構的bug
ok，這個reapeatIds裡面就是所有新增過的子節點的父節點id了，然後我們在push初始化節點的時候過濾一下就好了。大佬如有更好的辦法，麻煩留個言。
最後，，，求一份內推。。。

相關文章