场景:懒加载的树组件在执行增删改操作后需要执行局部刷新
element提供的树组件可以通过自定义树节点的内容给节点添加操作按钮,例如:新增下级、重命名、删除等
![](https://i-blog.csdnimg.cn/blog_migrate/f7d0362ec1cb2f11eec4443ad6f365d9.png)
执行上述操作后,则需要针对性的刷新节点。以上面三个操作为例:
新增下级:刷新当前节点的子集,且不改变当前选中项
重命名:刷新当前节点所隶属的父节点的子集(即包含当前节点的最新数据),不改变当前选中项
删除:刷新当前节点的父节点的子集,更改选中项为其父节点
官网提供的方法:
懒加载:
![](https://i-blog.csdnimg.cn/blog_migrate/a583f32e36eaa7374c66ef91b919d55e.png)
设置选中项:
![](https://i-blog.csdnimg.cn/blog_migrate/cbb1992f0cd9c01f35eabfc7a180a947.png)
树节点(node)上提供的方法:
![](https://i-blog.csdnimg.cn/blog_migrate/437df6728ea819052898b22cdc3664a8.png)
代码:
/* 懒加载 */
async loadNode(node, resolve) {
if (node.level === 0) {
// 异步加载根节点数据
const data = await fn({ parentId: '' });
resolve(data);
this.$nextTick(() => {
const nodeData = node.childNodes[0];
// 设置选中项
this.$refs.treeRef.setCurrentKey(data[0].id);
// 默认展开最外层节点
nodeData.expanded = true;
// 自动加载二级节点的数据
nodeData.loadData();
});
} else if (node.level > 0) {
// 异步加载子节点数据
const data = await fn({ parentId: node.data.id });
resolve(data);
}
},
/* 刷新当前节点 */
refreshTreeNode(node) {
// 更改当前节点的加载状态
node.loaded = false;
// 重新加载数据,入参为加载数据完成后执行的回调函数
node.loadData(()=>{
// 设置选中节点(缺少此步骤则会丢失选中状态)
this.$refs.treeRef.setCurrentKey(node?.data?.id || 0);
});
},
/* 刷新父节点 */
refreshParentTreeNode(node, isChangeSelect) {
// 更改父节点的加载状态
node.parent.loaded = false;
// 重新加载数据
node.parent.loadData(() => {
if(!isChangeSelect) {// 不改变选中项
this.$refs.treeRef.setCurrentKey(node?.data?.id || 0);
} else {// 选中父节点
this.currentNode = node.parent;
this.$refs.treeRef.setCurrentKey(node.parent?.data?.id || 0);
// todo 更改树节点选中项执行的数据操作
// ...
}
});
},