elementui中让树形控件保持展开
时间: 2023-07-12 21:42:39 浏览: 113
要让ElementUI的树形控件保持展开,可以通过设置`default-expanded-keys`属性来实现。该属性可以接受一个数组,数组中的元素表示需要保持展开的节点的`key`值。
具体实现方法如下:
1. 在树形控件的数据源中为每个节点添加一个`key`属性,例如:
```javascript
data() {
return {
treeData: [
{
id: 1,
label: '节点1',
children: [
{
id: 2,
label: '节点2'
}
]
}
]
}
}
```
2. 在树形控件中设置`default-expanded-keys`属性,例如:
```html
<el-tree
:data="treeData"
:default-expanded-keys="[1]">
</el-tree>
```
上面的代码中,`default-expanded-keys`属性的值为`[1]`,表示需要保持节点`id`为1的节点展开。
另外,如果需要保持多个节点展开,可以将多个节点的`key`值放在一个数组中传递给`default-expanded-keys`属性,例如:
```html
<el-tree
:data="treeData"
:default-expanded-keys="[1, 2]">
</el-tree>
```
上面的代码中,`default-expanded-keys`属性的值为`[1, 2]`,表示需要保持节点`id`为1和2的节点展开。
阅读全文
相关推荐
















