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

浅浅的花香味﹌ 2023-06-12 04:30 27阅读 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'
    		}
    	}
    }

见图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5NDA1NTgwMzY0_size_16_color_FFFFFF_t_70]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5NDA1NTgwMzY0_size_16_color_FFFFFF_t_70 1]  
自动加载并打开子节点。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5NDA1NTgwMzY0_size_16_color_FFFFFF_t_70]: /images/20230531/1a94c9f0dac143329683acd97134c2a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5NDA1NTgwMzY0_size_16_color_FFFFFF_t_70 1]: /images/20230531/446caec9b168488181bb50e440a0a053.png