vue中el-tree增加节点后如何重新刷新
目录
给el-tree增加节点后重新刷新
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);
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。
相关文章
Eilene
2020-01-19
Claire
2021-05-21
Judy
2023-07-20
Rabia
2023-07-20
Brigitte
2023-07-20
Abbie
2023-07-20
Yvonne
2023-07-20
Rasine
2023-07-20
Tina
2023-07-20
Kande
2023-07-20
Flower
2023-07-20
Heather
2023-07-20
Tertia
2023-07-20
Fredrica
2023-07-20
Katherine
2023-07-20
Genet
2023-07-20
Orianna
2023-07-20
Ora
2023-07-20