elementUI el-tree 问题解决

Question

Vue2 + elementUI el-tree
Vue2中使用ElementUI 中 的 el-tree 组件 懒加载 点击图标 不触发@node-click 方法，无法进行数据加载

```html
 <el-tree
        :data="treeData"
        node-key="id"
        :expand-on-click-node="true" 
        lazy
        empty-text="加载中，请稍后"
        @node-click="handleNodeClick"
        :props="defaultProps"
        :load="loadNode"
      >

```javascript

handleNodeClick(node, e) {
      if (e.level == 1) {
        this.queryParams.layerTypeId = node.layerTypeId;
        listLayer(this.queryParams)
          .then((res) => {
            this.treeTableData = res.rows;
          })
          .then((res) => {
            this.treeData.map((item) => {
              if (item.layerId == node.layerId) {
                let children = [];
                children.push(this.treeTableData);
                item.children = children;
              }
              this.treeTableData.map((item) => {
                let layerTypeName = item.layerName;
                item.layerTypeName = layerTypeName;
              });
              this.activeName = "first";
            });
          });
      }
      //只允许子节点点击跳转
      if (e.level == 2) {
        this.layerName = node.layerName;
        this.showForm = true;
        this.gatherXY = "";
        this.selectField(node);
        this.activeName = "first";
      }
    },
loadNode(node, resolve) {
      
      console.log("node", node);
      this.queryParams.taskId = node.data.taskId;
      if (this.queryParams.taskId != null) {
        this.handleNodeClick(node)
        listLayer(this.queryParams)
          .then((res) => {
            this.treeTableData = res.rows;
          })
          .then((res) => {
            this.treeData.map((item) => {
              if (item.layerId == node.layerId) {
                let children = [];
                children.push(this.treeTableData);
                item.children = children;
              }
              this.treeTableData.map((item) => {
                let layerTypeName = item.layerName;
                item.layerTypeName = layerTypeName;
              });
              this.activeName = "first";
            });
          });
      }
     
      if (node.level > 1) {
        return resolve([]);
      }
      setTimeout(() => {
        const data = this.treeTableData;
        resolve(data);
      }, 500);
    },

Answer 1

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7493230
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：vue中使用el-tree渲染树形层级数据
• 除此之外, 这篇博客: vue+elementUI实现el-tree默认选中第一层级的第一个节点中的 组装数据： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 规整数据，统一保持相同的名称，使用replace替换成label和id
  id为整个字段唯一的，不能把年级的id也进行替换，因为会重复
  如果不需要默认展开第一个层级下的第一个节点，id可不用替换，
  

       this.gradeTree = JSON.parse(
                JSON.stringify(data)
                  .replace(/gradeName|className/g, 'label')
                  .replace(/classId/g, 'id')
              );
  

  默认传进去的数据为defaultProps

   defaultProps: {
          children: 'classList',
          label: 'label'
        },
  

  默认展开第一层级下的第一个节点，就要使用default-expanded-keys和node-key（上面替换的id）
  如果只是想选中第一层级并不选中第一层级下的任何节点，在watch的时候querySelector选中.el-tree-node__content即可
  

   expandDefault: [], //默认选中第一项
   
   this.expandDefault.push(this.gradeTree[0].classList[0].id);
  
   watch: {
      expandDefault(newVal, oldVal) {
        if (newVal) {
          this.$nextTick(() => {
            document
              .querySelector('.el-tree-node__children .el-tree-node__content')
              .click();
          });
        }
      }
    }
  

  ---