el-tree当前选中的节点数据改变,刷新数据当前选中状态不变,代码实现
时间: 2023-05-16 07:05:28 浏览: 1688
可以使用 el-tree 的 ref 属性获取到 el-tree 的实例,然后通过监听当前选中节点数据的变化,再调用 el-tree 的 updateKeyChildren 方法来刷新数据,同时保持当前选中状态不变。以下是代码实现:
```javascript
<template>
<el-tree ref="tree" :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
label: '一级 1',
children: [
{
label: '二级 1-1',
children: [
{
label: '三级 1-1-1'
},
{
label: '三级 1-1-2'
}
]
},
{
label: '二级 1-2',
children: [
{
label: '三级 1-2-1'
},
{
label: '三级 1-2-2'
}
]
}
]
},
{
label: '一级 2',
children: [
{
label: '二级 2-1',
children: [
{
label: '三级 2-1-1'
},
{
label: '三级 2-1-2'
}
]
},
{
label: '二级 2-2',
children: [
{
label: '三级 2-2-1'
},
{
label: '三级 2-2-2'
}
]
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
mounted() {
this.$refs.tree.setCurrentKey('1-1-1')
},
methods: {
handleNodeClick(data) {
// 监听当前选中节点数据的变化
this.$watch(() => this.$refs.tree.getCurrentNode(), (newVal, oldVal) => {
if (newVal !== oldVal) {
// 刷新数据,保持当前选中状态不变
this.$refs.tree.updateKeyChildren(data.key, this.data)
}
})
}
}
}
</script>
```
这样,当 el-tree 的节点数据发生变化时,就会自动刷新数据,同时保持当前选中状态不变。
阅读全文