您现在的位置是:网站首页> 编程资料编程资料
vue中el-tree增加节点后如何重新刷新_vue.js_
2023-05-24
318人已围观
简介 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);以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- 基于微前端qiankun的多页签缓存方案实践_javascript技巧_
- uni-app实现数据下拉刷新功能实例_javascript技巧_
- 如何给JS中的数组开头添加元素_javascript技巧_
- OpenCV.js实现乔丹动图素描效果图文教程_javascript技巧_
- vue2.x中monaco-editor的使用说明_vue.js_
- vue实现录音功能js-audio-recorder带波浪图效果的示例_vue.js_
- JS原生手写轮播图效果_javascript技巧_
- Vue中sync修饰符分析原理及用法示例_vue.js_
- Avue 组件库的使用初体验_vue.js_
- vue中实现子组件接收父组件方法并获取返回值_vue.js_
