el-tree选中的结果生成新树

el-tree选中的结果生成新树

保证新生成的树和原先的树的结构是一样的。

就是实现了从第一个树种选择对应的节点，重新作为新的新树进行选择。

下面的是一个比较成熟的解决的方法。

1.树1 

funcDatas是最原始的数据，加载页面的时候从后端获取的。

<el-tree
              ref="tree1"
              node-key="id"
              :data="funcDatas"
              :props="funcTreeProps"
              @check-change="getMenuCheckedNodes"
              :default-checked-keys="tenantFuncDatas"
              show-checkbox
            ></el-tree>

      funcTreeProps: {
        children: 'children',
        label: 'label',
        value: 'id'
      },

获取选中的：

  //获取选择的菜单权限
    getMenuCheckedNodes() {
      this.checkedNodes = this.$refs.tree1.getCheckedKeys(true); //只要选中的页子节点
    },

data中声明：当前选中的节点

checkedNodes: []

2.树2

计算属性：生成树2的节点

menuCheckedNodes(){
      const tempTree = JSON.parse(JSON.stringify(this.funcDatas));
      const filteredData =this.filterTreeData(tempTree, this.checkedNodes)
      return filteredData;
    }

方法进行处理：

    filterTreeData(treeData, selectedNodeIds) {
      return treeData.filter(node => {
        if (selectedNodeIds.includes(node.funId)) { 
          return true;
        } else if (node.children) {
          node.children = this.filterTreeData(node.children, selectedNodeIds);
          return node.children.length > 0;
        } else {
          return false;
        }
      });
    },

 

<el-tree
              ref="tree2"
              node-key="funId"
              :data="menuCheckedNodes"
              :props="funcTreeProps"
              show-checkbox
></el-tree>