el-tree tree stepping pit

Requirement: The el-tree node needs to pass the selected parent menu to the background, not just the child nodes. For example, the node id managed by the system needs to be passed to the background as well.

Approach:

 Implementation: Simple, just pass getCheckedNodes(), but you need to define the following parameter half-selected nodes as true

Traverse to get the id

 let chooseArr = this.$refs.meauTree.getCheckedNodes(false,true);
 let idList = []
 chooseArr.forEach(item=>{
    idList.push(item.id);
 })

Common requirements should be met by getCheckedKeys.

 let chooseArr = this.$refs.meauTree.getCheckedKeys();

echo menu:

Here comes the problem. When the menu is echoed, the backend returns the ID of the parent node, so it needs to be filtered.

method:

Traverse the el-tree data to see if there are child nodes, if there are no child nodes, save the id

 resolveAllEunuchNodeId(json, idArr, temp) {
      for (let i = 0; i < json.length; i++) {
        const item = json[i]
        // 存在子节点，递归遍历;不存在子节点，将json的id添加到临时数组中
        if (item.children && item.children.length !== 0) {
          this.resolveAllEunuchNodeId(item.children, idArr, temp)
        } else {
          temp.push(idArr.filter(id => id === item.id))
        }
      }
      return temp
    }

use:

menuData tree structure data 

The menuIds backend contains all half-selected node id arrays

 // 解析出所有的太监节点
this.menuIdList = this.resolveAllEunuchNodeId(this.menuData, menuIds, [])