el-collapse默认不展开
时间: 2023-09-12 17:03:32 浏览: 171
是的,Element UI 的 el-collapse 默认是不展开的,需要用户点击标题才能展开对应的内容。如果需要默认展开某个面板,可以设置 `v-model` 绑定一个 Boolean 类型的变量,并将其设为 `true`。例如:
```html
<el-collapse v-model="isCollapseOpen">
<el-collapse-item title="面板标题">
面板内容
</el-collapse-item>
</el-collapse>
```
在 Vue 实例中,需要定义 `isCollapseOpen` 变量:
```js
data() {
return {
isCollapseOpen: true
}
}
```
这样,该面板就会默认展开。如果想要所有面板都默认展开,可以将 `v-model` 绑定到一个数组中,并在数组中存储所有面板的 `name` 属性。例如:
```html
<el-collapse v-model="activeNames">
<el-collapse-item title="面板1" name="1">
面板1内容
</el-collapse-item>
<el-collapse-item title="面板2" name="2">
面板2内容
</el-collapse-item>
</el-collapse>
```
在 Vue 实例中,需要定义一个数组来存储所有面板的 `name` 属性:
```js
data() {
return {
activeNames: ['1', '2']
}
}
```
这样,所有面板都会默认展开。
阅读全文