VUE3-element-plus el-table子节点懒加载删除，编辑不刷新解决方案

这个事儿恶心我一上午，上网百度了良久，他们的方案行不行我不知道，但是本人用的是setup操作，这里边不支持this，虽然可以通过 getCurrentInstance 获取到与this相同的效果，但是

官网都这么说了，你好意思在应用代码里边用吗?

进入正题

首先el-table 设置了lazy=true 的属性后可以实现树状结构懒加载，懒加载函数是通过属性load传入一个函数来实现的

可以看到该函数支持是哪个参数

row： 毋庸置疑，当前行，也就是父节点的行数据

treeNode: 树结构的节点属性

resolve: 是一个函数，用来加载子节点数据

通过控制台打印可以看到treeNode结构如下:

这里比较关键的就是loading这个属性，这个属性决定了会不会重新加载子节点。知道这个就好办了，我们只需要在适当的时候将loading的值改为true不就可以了?

这个时候又有一个新的问题出现了，那就是load定义的函数只有在第一次打开子节点的时候才会触发，其他时候不会触发，那么这个时候就需要我们手动操作了。我这里在其他的博客中吸取了一下经验，在进入子节点的时候将row,treeNode,resolve保存起来，在需要的时候手动调用load定义的函数即可。保存的方式很多，因为不需要持久化，那么我直接选用map

let maps = ref(new Map())

// load 函数中的将当前行信息保存
maps.value.set(row.id, {row, treeNode, resolve})

//适当的时候取出来，将treeNode的loading设置为true即可，然后重新调用load属性定义的函数，我这里定义//的函数名叫做loadChildren
let rtr = maps.value.get(row.parent);
if (rtr){
rtr.treeNode.loading = true
loadChildren(rtr.row, rtr.treeNode, rtr.resolve)
}

这样定义map本人也是借鉴别的博文，但是他们取值的时候是这样的:
 

let {row,treeNode,resolve} = maps.value.get(xxx)

我尝试了一下，row的值总是空，不知道为啥，最后只能选择以下

let rtr = maps.value.get(row.parent);

然后通过属性的方式一个一个获取

本人是个java后端开发，前端不是很好，如果有什么不对的地方请多指正

最后

以上就是无语摩托为你收集整理的VUE3-element-plus el-table子节点懒加载删除，编辑不刷新解决方案的全部内容，希望文章能够帮你解决VUE3-element-plus el-table子节点懒加载删除，编辑不刷新解决方案所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。