element-ui table树形表格懒加载修改数据后没有重新load子集数据的解决办法

最新推荐文章于 2024-01-10 15:54:50 发布

原创最新推荐文章于 2024-01-10 15:54:50 发布 · 2.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了在使用Element-UI的Table组件构建树形表格并应用懒加载时，如何解决修改数据后未能重新加载子集数据的问题。通过在展开节点时动态调用loadChild方法，可以确保每次展开时获取最新的子集信息。

添加:key="Math.random()"可以实现每次展开时调用:load="loadChild"方法

<el-table
      :data="list"
      style="width: 100%"
      row-key="id"
      :key="Math.random()"
      border
      lazy
      ref="multipleTable"
      @selection-change="checkAll"
      :load="loadChild"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
</el-table>

	methods: {
	    loadList() {
	      api.findList(this.form, this.page.pageNum, this.page.pageSize).then((result) => {
	        this.list = result.data.list;
	        this.page.totalCount = result.data.total;
	      })
	    },
	    loadChild(tree, treeNode, resolve) {
	      api.findChildrenById(tree.id).then((result) => {
	        resolve(result.data);
	      });
	    }
	 }