vue+element-ui实现树形数据以及数据懒加载

树形数据子节点数据的异步加载

表格上的属性添加

这里需要添加的属性：

#直接添加，不需要修改
:tree-props="{children:'children',hasChildren:'hasChildren'}"
#函数名称，修改成自己的
:load="loadRecord"
#row-key修改成自己的，如果使用的是主键，而且子节点加载的数据是另一张表的内容，注意主键的名称要一直，按这里来说，就是主键都要是’id‘这个名称
row-key="id"
#直接添加
lazy

js代码的处理

在加载表结构中的主节点数据的时候，为每一个主节点中的hasChildren属性设置成true。则表格上数据显示成：

   listProject(this.queryParams).then(response => {
        this.projectList = response.rows;
        //进行项目是否存在记录的判断
        this.projectList.forEach(function (item, index) {
          _self.projectList[index].hasChildren = true;
        });
        this.total = response.total;
        this.loading = false;
      });

子节点数据异步加载

loadRecord(tree, treeNode, resolve) {
      // 获取主节点中的id值
      const projectId = tree.id;
      //将当前选中节点存储到maps中去
      this.maps.set(projectId, {tree, treeNode, resolve});
      //  根据主节点id值去查询字节点数据
      selectByProjectId(projectId).then(response => {
        const menuList = response.data;
        resolve(menuList);
      })
    }

这样就可以实现树形结构数据，以及数据的懒加载，但在子节点数据的进行的了增、删、改等操作，子节点并不会刷新。

子节点修改之后刷新问题

其中表格中的ref属性名称为’multipletable’，对应表格中的数据是指：

之后，每当子节点数据进行了修改、增加、删除之后，在对应的操作进行子节点刷新即可：
例如子节点删除之后，进行对应主节点下子节点数据的刷新：

之后再对子节点的数据操作了之后，只需添加子节点的刷新即可。