Alice-UI

Collapse 手风琴

代码展示

显示一个

<alice-collapse  :selected="list1" single>
  <alice-collapse-item title="手风琴1" name="collapse1">
    <alice-cell title="元素1" is-link />
    <alice-cell title="元素2" is-link />
    <alice-cell title="元素3" is-link/>
  </alice-collapse-item>
  <alice-collapse-item title="手风琴2" name="collapse2">
    <alice-cell title="元素1" is-link />
    <alice-cell title="元素2" is-link />
    <alice-cell title="元素3" is-link/>
  </alice-collapse-item>
</alice-collapse>

显示多多个

<alice-collapse  :selected="list2" >
  <alice-collapse-item title="手风琴1" name="collapse1">
    <alice-cell title="元素1" is-link />
    <alice-cell title="元素2" is-link />
    <alice-cell title="元素3" is-link/>
  </alice-collapse-item>
  <alice-collapse-item title="手风琴2" name="collapse2">
    <alice-cell title="元素1" is-link />
    <alice-cell title="元素2" is-link />
    <alice-cell title="元素3" is-link/>
  </alice-collapse-item>
</alice-collapse>

Collapse API

参数 说明 类型 默认值
selected 选择要显示子元素 Array -
single 是否开启手风琴模式 Boolean false

Collapse Event

事件名 说明 参数
update:selected 配合.sync 参考官方文档 -

Collapse Slot

名称 说明
- 插入 collapseItem

Collapse Item API

参数 说明 类型 默认值
title 标题 String default
name 唯一标识符，默认为索引值 String -

Collapse Item Slot

名称 说明
- 插入内容

← Checkbox 多选 →