vue中el-tree增加节点后如何重新刷新
更新时间:2022年08月02日 14:44:36 作者:xy405580364
这篇文章主要介绍了vue中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);
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
这篇文章主要介绍了Vue+ElementUI从零开始搭建自己的网站(一、环境搭建),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-04-04启动myvue报错npm ERR! code ENOENT npm ERR! syscall open的解
这篇文章主要介绍了启动myvue报错npm ERR! code ENOENT npm ERR! syscall open的解决办法,文中给出了详细的解决方法,并通过图文结合的方式介绍的非常详细,需要的朋友可以参考下2024-03-03
最新评论