elementui expand
ElementUI Expand 组件使用指南
ElementUI 提供了 el-expand 组件（通常以 el-collapse 和 el-collapse-item 形式实现），用于创建可折叠/展开的内容区域。
基础用法
通过 v-model 绑定当前激活的面板名称，非手风琴模式下可同时展开多个面板：
<el-collapse v-model="activeNames">
<el-collapse-item title="标题1" name="1">
<div>内容1</div>
</el-collapse-item>
<el-collapse-item title="标题2" name="2">
<div>内容2</div>
</el-collapse-item>
</el-collapse>
<script>
export default {
data() {
return {
activeNames: ['1']
}
}
}
</script>手风琴模式
设置 accordion 属性后，每次只能展开一个面板：
<el-collapse v-model="activeName" accordion>
<el-collapse-item title="标题1" name="1">
<div>内容1</div>
</el-collapse-item>
</el-collapse>自定义标题
通过具名插槽 title 可自定义标题内容：
<el-collapse-item name="1">
<template slot="title">
<i class="el-icon-info"></i>
<span>自定义标题</span>
</template>
<div>内容区域</div>
</el-collapse-item>动态控制展开状态
通过修改 v-model 绑定的数组可以动态控制展开状态：
methods: {
toggleExpand() {
this.activeNames = this.activeNames.includes('1')
? []
: ['1']
}
}样式定制
可通过覆盖以下 CSS 类名自定义样式：
.el-collapse- 整体容器.el-collapse-item__header- 标题区域.el-collapse-item__wrap- 内容包裹层.el-collapse-item__content- 内容区域
.el-collapse-item__header {
font-weight: bold;
color: #409EFF;
}注意事项
name属性在el-collapse-item上必须唯一- 手风琴模式下
v-model应绑定字符串而非数组 - 内容区域高度变化会有动画效果，可通过
:duration="0"禁用 - 2.15.0+ 版本支持
disabled属性禁用特定面板
