实现效果
懒加载需要的参数
<el-table
:data="list"
ref="Table"
:load="load"
lazy
row-key="id"
border
class="table"
: ="{ children: 'children', hasChildren: 'hasChildren' }"
>
// lazy是否懒加载子节点数据 load加载子节点数据的函数 children 子节点 hasChildren 是否可以懒加载
load函数
async load(tree, treeNode, resolve) {
this.maps.set(tree.id, { tree, treeNode, resolve });
let id = Date.now();
resolve([
{
name: `${tree.name}_1`,
id,
children: [],
hasChildren: true,
partId: tree.id,
},
{
name: `${tree.name}_2`,
id: id + 1,
children: [],
hasChildren: true,
partId: tree.id,
},
]);
},
// this.maps将点击过的 元素存下来 resolve里面的值 是接口返回来的
添加元素代码
addEventListener(row) {
if (this.maps.get(row.id)) {
const { tree, treeNode, resolve } = this.maps.get(row.id);
this.load(tree, treeNode, resolve, tree);
}
},
//获取到id然后 去取this.maps里的元素 在调用 load去刷新你的子元素 编辑的话也是同理
删除元素代码
在这里不调用load来刷新子元素的原因是因为el-table组件存在一个懒加载的bug,当只有一个子元素时调用load就算传的是[]页面也不会发生改变。我的处理方法是通过访问this.$refs.Table.store.states.lazyTreeNodeMap来获取所有缓存的元素,
然后自己通过id递归匹配,如果匹配成功就删除节点。
handleDelete(row) {
// console.log(row);
if (row.partId) {
let tree = this.$refs.Table.store.states.lazyTreeNodeMap;
this.removeNodeById(tree, row.id);
}
},
removeNodeById(tree, idToRemove) {
if (typeof tree === "object") {
for (let key in tree) {
this.removeNodeById(tree[key], idToRemove);
}
}
if (Array.isArray(tree)) {
for (let i = 0; i < tree.length; i++) {
if (tree[i].id === idToRemove) {
tree.splice(i, 1);
return tree;
}
if (tree[i].children && tree[i].children.length > 0) {
const childDeleted = this.removeNodeById(
tree[i].children,
idToRemove
);
if (childDeleted) return true;
}
}
}
return false;
},