element ui Tree樹形控件獲取未全選父節點和子節點id

Tree樹形控件選中狀態

 

 

 

在做分配權限的時候如圖選擇了父節點的某些子節點，現在父節點是半選中狀態，使用this.$refs.tree.getCheckedKeys()只能拿到當前的子節點，子節點全選才能拿到父節點，而后台需要我們把父節點和子節點一起帶過去。

 

解決方法

  // 獲取選中的子節點
  let checkedKeys = this.$refs.tree.getCheckedKeys();
  // 獲取選中的父節點
  let hafCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
  // 合並
  let functionIdList = checkedKeys.concat(hafCheckedKeys)
  然后再傳給后台

這樣我們就解決了子節點未全選時拿到父節點id

 

 

Tree樹形控件回顯問題

解決了上一步你會發現回顯的時候有問題，后台返回的數據中選有父節點id和子節點id就導致父節點直接全選

 

解決辦法

//  先清空選中狀態
 this.$refs.tree.setCheckedKeys([])
  functionIdList.forEach(i => {
         // 根據id 拿到 Tree 組件中的node的所有信息
        let node = this.$refs.tree.getNode(i);
        // node.isLeaf：判斷當前節點是否為子節點
        if (node.isLeaf) {
             //如果是子節點，就把狀態設置成選中
          this.$refs.tree.setChecked(node, true);
        } else {

        }
  })
  //functionIdList是設置選中的數據

 

原文鏈接：https://blog.csdn.net/green111111112/article/details/112371860