【element-ui】element-ui el-tree懒加载后默认展开一项并选择其中几个子节点

Z时代
2024-01-10
分类：技术分享

项目中使用到element-ui的el-tree组件，现在要求使用懒加载加载数据，需要默认展开并选中其中几个节点，尝试使用:default-checked-keys="defaultSelectNode"但是因为懒加载id未知。

<el-tree
  :data="treeData"
  :props="defaultProps"
  :load="loadNode"
  lazy
  node-key="id"
  @check="handleNodeClick"
  show-checkbox
  :filter-node-method="funcFilter"
  ref="treeRef"></el-tree>

懒加载方法的代码如下

loadNode(node, resolve) {
      if (node.level === 0) {
        this.firstNode = node;
        console.log(node);
        listTree(2).then((res) => {
          console.log(res);
          if (res.code == 200) {
            let treeList = [];
            this.treeListLevel1 = res.data[0].children;
            res.data[0].children.forEach((item) => {
              let treeItem = {
                name: item.regionName,
                regionId: item.id,
              };
              treeList.push(treeItem);
            });
            this.$nextTick(() => {
              let nodedata = this.firstNode.childNodes[0];
              nodedata.expanded = true;
              nodedata.loadData();
            });
            return resolve(treeList);
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        });
      } else if (node.level == 1) {
        this.treeListLevel1.forEach((item) => {
          if (item.regionName == node.label) {
            let param = {
              regionId: item.id,
              status: "all",
              subrange: true,
            };
            deviceDataList(param).then((res) => {
              if (res.code == 200) {
                let childList = [];
                this.treeListLevel2 = res.data;
                console.log(res);
                res.data.forEach((item) => {
                  let childItem = {
                    name: item.paramsInfo[0].name,
                    leaf: true,
                    eui: item.eui,
                  };
                  childList.push(childItem);
                });
                return resolve(childList);
              } else {
                this.$message({
                  type: "error",
                  message: res.message,
                });
              }
            });
          }
        });      }