您现在的位置是:网站首页> 编程资料编程资料

vue中el-tree增加节点后如何重新刷新_vue.js_

2023-05-24 316人已围观

简介 vue中el-tree增加节点后如何重新刷新_vue.js_

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

1.树形组件

 //点击事件 

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(); //组件使用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);

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。

-六神源码网