不知道大家有没有遇到过使用element的表格懒加载只会执行一次的情况，但是这样就会出现一种问题。当你加载完列表项的子数据之后，如果你对子数据有所修改但是你的懒加载是无法再次执行重新加载你修改之后的子数据，只有重新刷新也面，才能重新执行懒加载获得修改之后的子数据。那么这个问题该怎么解决呢？据我所知有两种方法，我个人更加推荐第二种方法。
这是基于elementPlus+vue3使用vue2和elment可能会有一点差别，但是大致应该是一样的改一下就好啦
方法一
下面是element中对table懒加载的使用
js
<template>
<div>
<el-table :data="tableData" style="width: 100%" row-key="id" border lazy :load="load"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
hasChildren: true
}, {
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
load(tree, treeNode, resolve) {
setTimeout(() => {
resolve([
{
id: 31,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 32,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}
])
}, 1000)
}
},
}
</script>在代码中可以看见我们执行懒加载时调用的是load方法，这个方法有三个参数，但是这三个参数并不是我们传入的而是element作者对table进行封装时默认传入的。如果我们要想手动的调用load方法并重新进行懒加载获取新的数据那就必须要获得这三个参数。这里最简单的办法就是在每一次运行load时把load的三个参数存在一个对象里面，在后面如果需要调用laod方法就去对象中寻找对应的参数并传入，最终实现手动执行懒加载。下面是代码部分
js
<template>
<div>
<el-table :data="tableData" style="width: 100%" row-key="id" border lazy :load="load"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
hasChildren: true
}, {
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
loadData: []
}
},
methods: {
load(tree, treeNode, resolve) {
let flag = 0
this.loadData.forEach((item) => {
if(item.tree === tree){
falg = 1
}
})
if(flag === 0) this.load.push({tree, treeNode, resolve})
setTimeout(() => {
resolve([
{
id: 31,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 32,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}
])
}, 1000)
}
},
}
</script>这里使用懒加载使用的是定时器代替，在项目中一般都是用axios发请求获取数据之后渲染，在我们获取到load方法的参数之后，后续我们就可以在我们想调用懒加载时，在其他地方手动的调用load方法重新加载数据，比如在我们编辑或者删除子节点时，手动调用load并传入父节点的load参数。 总结一下这种方法就是一下几个步骤
1.首次调用load储存参数
2.对需要重新懒加载的操作时，调用laod方法并传入对应节点的load参数
就只需要这两步就可以实现手动调用load方法实现二次懒加载了。
方法二
第二种无需存储参数，它是直接调用table的ref对象中的方法进行刷新，但是这个方法在官方文档中并没有标注，只能自己去ref对象中调用。代码如下
js
<template>
<div>
<el-table ref="tableRef" :data="tableData" style="width: 100%" row-key="id" border lazy :load="load"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<el-table-column fixed="right" label="操作" width="120">
<template #default = "scope">
<el-button link type="primary" size="small" @click="refresh(scope.row)"
>刷新</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
hasChildren: true
}, {
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
loadData: []
}
},
methods: {
load(tree, treeNode, resolve) {
setTimeout(() => {
resolve([
{
id: 31,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 32,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}
])
}, 1000)
},
handleDelete(){},
refresh(row) {
const tableRef = this.$refs.tableRef
// 设置该节点为未加载状态
tableRef.store.states.treeData.value[row.id].loaded = false;
// 加载并展开点击节点
tableRef.store.loadOrToggle(row);
}
}
}
</script>上面代码是直接可以运行的，就是有点简陋，你直接点击第三个有子节点的数据刷新，每次点击节点都会刷新。在实际项目中直接把laod中的逻辑改成获取子节点的逻辑就好了。
希望这篇文章对你有帮助。文章可能会有瑕疵，有问题可以在评论区提出哦