在进行懒加载的树组件中,操作子节点新增、修改以及删除操作时,需要对树组件进行局部刷新:
/* 懒加载 */
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 更改树节点选中项执行的数据操作// ...}});
},