vue+element-树形table子节点数据实现实时刷新(亲测可用)
一、问题描述:vue-element 使用树形结构的table,即可收缩的table时,由于设置lazy懒加载,导致无法在修改或删除child子列表后实时刷新。二、问题分析:由于官方文档并没有提供相关刷新方法,需要我们自己来实现。实现刷新的关键点在于resolve方法于是我们在load绑定的方法中需要将resolve保存下来,三、具体实现:第一步:首先在data中定义一个mapmaps: new
·
一、问题描述:
vue-element 使用树形结构的table,即可收缩的table时,由于设置lazy懒加载,导致无法在修改或删除child子列表后实时刷新。
二、问题分析:
由于官方文档并没有提供相关刷新方法,需要我们自己来实现。
实现刷新的关键点在于resolve方法
于是我们在load绑定的方法中需要将resolve保存下来,
三、具体实现:
第一步:首先在data中定义一个map
maps: new Map(),
第二步:在load绑定的方法中保存,通过父级id作为key,将节点的数据,和resolve保存在map中
this.maps.set(row.id, { row, treeNode, resolve })
第三步:定义一个刷新子列表的方法
refresh(parentId) {
// 根据父级id取出对应节点数据
const { row, treeNode, resolve } = this.maps.get(parentId)
this.$set(this.$refs.multipleTable.store.states.lazyTreeNodeMap, parentId, [])
if (row) {
this.loadTree(row, treeNode, resolve)
}
},
第四步:注意一个变量名称 this.$refs.multipleTable需要配置到table中
<el-table
ref="multipleTable"
:data="tableData"
style="width: 100%"
row-key="id"
border
lazy
:load="loadTree"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
第五步:在删除或修改成功后,根据实际情况调用fresh方法刷新子列表,或调用其他方法刷新父列表
完美收工,亲测可用
更多推荐
已为社区贡献1条内容
所有评论(0)