# Collapse 折叠面板
可以折叠/展开的区域,可以设置单个内容区域展开。
# 设置默认开启内容
浏览
设置默认展开第一个,可在 selectedItem
数组中设置默认展开多个。
代码演示
<o-collapse :selected.sync="selectedItem">
<o-collapse-item title="This is panel header 1" name="1">
<div>Orange is a kind of fruit</div>
</o-collapse-item>
<o-collapse-item title="This is panel header 2" name="2">
<div>Orange is a kind of fruit</div>
</o-collapse-item>
<o-collapse-item title="This is panel header 3" name="3">
<div>Orange is a kind of fruit</div>
</o-collapse-item>
</o-collapse>
data(){
return{
selectedItem: ['1'],
}
}
# 设置single
手风琴,每次只打开一个
浏览
代码演示
<o-collapse :selected.sync="selectedItem" single>
<o-collapse-item title="This is panel header 1" name="1">
<div>Orange is a kind of fruit</div>
</o-collapse-item>
<o-collapse-item title="This is panel header 2" name="2">
<div>Orange is a kind of fruit</div>
</o-collapse-item>
<o-collapse-item title="This is panel header 3" name="3">
<div>Orange is a kind of fruit</div>
</o-collapse-item>
</o-collapse>
data(){
return{
selectedItem: [],
}
}