async onRefresh(parentId) {
let result = await getItemTreeList({ parentId }); // 首先请求获取子节点数据
let updatedChild = this.setHasChildren(result.data)
this.updateKeyChildren(parentId, updatedChild)
},
updateKeyChildren(parentId, updatedChild) {
let states = this.$refs.treeTable.store.states // 获取el-table内部数据存储
let parentData = states.treeData[parentId]
if (!parentData) {
return this.getItemTreeList()
}
let deep = (list) => {
for (let i = 0; i < list.length; i++) {
let item = list[i]
if (item.id === parentId) {
this.$set(item, 'children', updatedChild)
break;
} else {
item.children.length && deep(item.children)
}
}
}
deep(states.data) // 更新table内部data
this.$delete(states.lazyTreeNodeMap, parentId) // 删除当前子节点懒加载缓存
this.$nextTick(() => {
this.$set(parentData, 'children', updatedChild.map(item => item.id))
this.$set(parentData, 'expanded', false) // 关闭当前操作的父节点
this.$nextTick(() => {
this.$set(parentData, 'expanded', true) // 重新打开节点
})
})
},
Vue el-table (编辑,新增,删除)不刷新更新树形子节点数据
于 2023-04-15 11:27:47 首次发布