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组件之全局注册和局部注册方式

    vue组件之全局注册和局部注册方式

    这篇文章主要介绍了vue组件之全局注册和局部注册方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue3页面跳转的两种方式

    vue3页面跳转的两种方式

    vue3的页面跳转有两种方式,第一种是标签内跳转,第二种是编程式路由导航,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2023-05-05
  • van-uploader保存文件到后端回显后端接口返回的数据

    van-uploader保存文件到后端回显后端接口返回的数据

    前端开发想省时间就是要找框架呀,下面这篇文章主要给大家介绍了关于van-uploader保存文件到后端回显后端接口返回的数据,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • Vue3安装dataV报错问题解决方案

    Vue3安装dataV报错问题解决方案

    这篇文章主要给大家介绍了关于Vue3安装dataV报错问题解决方案的相关资料,dataV用于大屏展示,个人觉得比echarts简单很多,需要的朋友可以参考下
    2023-06-06
  • Vue中.vue文件比main.js先执行的问题及解决

    Vue中.vue文件比main.js先执行的问题及解决

    这篇文章主要介绍了Vue中.vue文件比main.js先执行的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 在vue中使用vuex,修改state的值示例

    在vue中使用vuex,修改state的值示例

    今天小编就为大家分享一篇在vue中使用vuex,修改state的值示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 对vue中的input输入框进行邮箱验证方式

    对vue中的input输入框进行邮箱验证方式

    这篇文章主要介绍了对vue中的input输入框进行邮箱验证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 基于Vant UI框架实现时间段选择器

    基于Vant UI框架实现时间段选择器

    这篇文章主要为大家详细介绍了基于Vant UI框架实现时间段选择器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • Vue中组件之间传值的六种方式(完整版)

    Vue中组件之间传值的六种方式(完整版)

    组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题,本文总结了 vue 组件间通信的几种方式,需要的朋友可以参考下
    2025-03-03
  • vue MVVM双向绑定实例详解(数据劫持+发布者-订阅者模式)

    vue MVVM双向绑定实例详解(数据劫持+发布者-订阅者模式)

    使用vue也好有一段时间了,也算对其双向绑定原理也有了解个大概,这篇文章主要给大家介绍了关于vue MVVM双向绑定(数据劫持+发布者-订阅者模式)的相关资料,需要的朋友可以参考下
    2022-03-03

最新评论