el-tree当前选中的节点数据改变,刷新数据保持当前选中的数据选中状态不变,如何用代码实现
时间: 2023-05-16 15:05:48 浏览: 195
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
可以使用 el-tree 的 setCurrentKey 方法来实现当前选中的节点数据改变后,保持当前选中的数据选中状态不变的功能。具体实现方法如下:
1. 在 el-tree 组件中,绑定一个 @node-click 事件,用于监听节点的点击事件。
2. 在事件处理函数中,获取当前点击的节点数据,并将其设置为当前选中的节点数据。
3. 在设置当前选中的节点数据后,调用 el-tree 的 setCurrentKey 方法,将当前选中的节点数据的 key 值作为参数传入。
4. 在 setCurrentKey 方法的回调函数中,重新获取 el-tree 的数据源,并将其设置为 el-tree 的数据源,从而实现刷新数据的功能。
下面是示例代码:
<template>
<el-tree
:data="treeData"
:props="treeProps"
:default-expand-all="true"
:highlight-current="true"
@node-click="handleNodeClick"
></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: '节点1',
children: [
{
id: 2,
label: '节点1-1',
},
{
id: 3,
label: '节点1-2',
},
],
},
{
id: 4,
label: '节点2',
children: [
{
id: 5,
label: '节点2-1',
},
{
id: 6,
label: '节点2-2',
},
],
},
],
currentKey: null,
};
},
computed: {
treeProps() {
return {
label: 'label',
children: 'children',
};
},
},
methods: {
handleNodeClick(data) {
this.currentKey = data.id;
this.$refs.tree.setCurrentKey(this.currentKey, () => {
this.treeData = [...this.treeData];
});
},
},
};
</script>
阅读全文