vue中el-tree增加节点后重新刷新

最新推荐文章于 2024-07-27 09:00:00 发布

xy405580364

最新推荐文章于 2024-07-27 09:00:00 发布

阅读量2.1w

点赞数 4

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/xy405580364/article/details/102840405

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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);