Vue中el-tree增加节点后，如何重新刷新节点显示？

本文共计515个文字，预计阅读时间需要3分钟。

目录 + 为el-tree增加节点后重新刷新 + el-tree全树刷新，节点刷新 + 单节点刷新 + 全树刷新 + 给el-tree增加节点后重新刷新

1.树形组件 + el-tree + v-if=openPanel // 加载：data=data // 树形数据：props=defaultProps

目录

• 给el-tree增加节点后重新刷新
• el-tree全树刷新,节点刷新
• 单节点刷新
• 全树刷新

给el-tree增加节点后重新刷新

1.树形组件

<el-tree v-if="openPanel" //重加载 :data="data" //树形数据 :props="defaultProps" node-key="id" //默认展开节点 :default-expanded-keys="[-1]" //默认展开节点：-1 @node-click="handleNodeClick"> //点击事件 </el-tree>

2.data 初级节点"仪表板"默认展开

data() { return { openPanel:true, data: [{ id: -1, label: '仪表板', children: [ ] }], defaultProps: { children: 'children', label: 'label' } } }

见图：

3.完成增加save操作后，重新查询加载树

//先增加 this.doAdd(val); //然后清空树的数据 this.sup_this.data = [{ id: -1, label: '仪表板', children: [ ] }]; //在0.1s后重新查询并加载树 setTimeout(() => { //查询树的数据 this.queryPanel(); //<el-tree>组件使用v-if重新加载 this.openPanel = false; this.sup_this.$nextTick(() => { this.openPanel = true; }) }, 100);

自动加载并打开子节点。

el-tree全树刷新,节点刷新

单节点刷新

1.如果你的el-tree设置了node-key=“id”，拿父节点的id 作为第一个参数，

2.重新请求子节点数据，数组作为第二个参数

3.调用updateKeyChildren

      let {         updateKeyChildren,       } = this.$refs.entityTreeRef;              let res = await this.listChildrenNode(this.confTarget);       updateKeyChildren(id, res);

全树刷新

1.保存上次展开节点的id (可选)

代码如下：

let { nodesMap } = this.$refs.entityTreeRef.root.store; let lastExpandIds = []; let localMap = Object.values(nodesMap); localMap.forEach(item => {   if (item.expanded) {     lastExpandIds.push(item.data.id);   } }); nodesMap = {};

2.清除本次树的store数据

nodesMap = {};

3.设置树的defaultExpandedKeys属性值变量

let { nodesMap } = this.$refs.entityTreeRef.root.store; this.defaultExpandedKeys = ids; this.$refs.entityTreeRef.root.setData(result);

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。