elementui树形控件刷新后保持展开
时间: 2023-08-22 07:08:37 浏览: 97
要使ElementUI的树形控件刷新后保持展开状态,可以在刷新之前先将原来已经展开的节点信息存储下来,再在刷新后重新将这些节点展开。具体实现方法如下:
1. 在树形控件的数据源中添加一个数组,用于存储已经展开的节点信息,例如:
```javascript
data() {
return {
treeData: [], // 树形控件的数据源
expandedNodes: [] // 存储已经展开的节点信息
}
}
```
2. 在树形控件的`expand-change`事件中,将展开的节点信息存储到`expandedNodes`数组中,例如:
```javascript
<el-tree
:data="treeData"
@expand-change="handleExpandChange">
...
</el-tree>
...
methods: {
handleExpandChange(nodes, expanded) {
if (expanded) {
this.expandedNodes = nodes.map(node => node.id)
}
}
}
```
3. 在刷新后,重新展开`expandedNodes`数组中存储的节点信息,例如:
```javascript
methods: {
refreshTreeData() {
// 刷新树形控件的数据源
// ...
// 展开之前已经展开的节点
this.$nextTick(() => {
this.$refs.tree.$children[0].setCheckedKeys(this.expandedNodes)
})
}
}
```
注意,这里使用了`this.$refs.tree.$children[0]`来获取树形控件实例,因为树形控件可能嵌套在多层组件中,需要通过`$children`递归获取到树形控件实例。另外,由于`setCheckedKeys`方法是异步的,需要在`$nextTick`回调中调用,以确保在DOM更新后再进行展开操作。
阅读全文