折叠面板 Collapse
通过 accordion 开启手风琴模式，同时只能打开一个面板。
用于将复杂的内容区域分组和隐藏，可折叠或展开。默认可以展开多个面板。
通过设置 bordered="false" 隐藏边框。
自定义面板样式。
通过设置 destroy-on-hide 可以让面板内容在隐藏时销毁。
为展开项自定义展开图标
通过 extra 可以设置额外节点。extra 单击可以以设置 stop 修饰符，以阻止当前项目展开。
展开图标位置
Section titled “展开图标位置”通过 expand-icon-position 属性设置展开图标的位置。
面板多层嵌套。
<collapse> Props
Section titled “<collapse> Props”| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| active-key (v-model) | 当前展开的面板的 key |
(string | number)[] |
- |
|
| default-active-key | 默认展开的面板的 key （非受控模式） |
(string | number)[] |
[] |
|
| accordion | 是否开启手风琴模式 | boolean |
false |
|
| show-expand-icon | 是否显示展开图标 | boolean |
- |
2.33.0 |
| expand-icon-position | 展开图标显示的位置 | 'left' | 'right' |
'left' |
|
| bordered | 是否显示边框 | boolean |
true |
|
| destroy-on-hide | 是否在隐藏时销毁内容 | boolean |
false |
2.27.0 |
<collapse> Events
Section titled “<collapse> Events”| 事件名 | 描述 | 参数 |
|---|---|---|
| change | 展开的面板发生改变时触发 | activeKey: (string | number)[]ev: Event |
<collapse-item> Props
Section titled “<collapse-item> Props”| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| header | 面板的标题 | string |
- |
|
| disabled | 是否禁用 | boolean |
false |
|
| show-expand-icon | 是否显示展开图标 | boolean |
true |
|
| destroy-on-hide | 是否在隐藏时销毁内容 | boolean |
false |
2.27.0 |
<collapse-item> Slots
Section titled “<collapse-item> Slots”| 插槽名 | 描述 | 参数 | 版本 |
|---|---|---|---|
| extra | 额外内容 | - | |
| expand-icon | 展开图标 | active: booleandisabled: booleanposition: 'left' | 'right' |
2.33.0 |
| header | 面板的标题 | - |
<CollapseItem> 组件的 key 属性为必填
Section titled “<CollapseItem> 组件的 key 属性为必填”在 <Collapse> 组件中每个 <CollapseItem> 都需要指定唯一的 key 属性，key 对应 activeKey 中的值。