# 折叠面板 - Collapse

# 可多选版 Collapse 预览及使用方法

标题1
标题2
标题3
<g-collapse :selected.sync="selectedTab">
  <g-collapse-item title="标题1" name="1">内容1</g-collapse-item>
  <g-collapse-item title="标题2" name="2">内容2</g-collapse-item>
  <g-collapse-item title="标题3" name="3">内容3</g-collapse-item>
</g-collapse>

data(){ return{ selectedTab : ['1'] } },

# 相关提示:

# 1、必选参数

Collapse 组件必须接受两个参数: title 用于显示折叠面板的标题。 name 用于表示选中的 item

# 2、selectedTab

该属性用于设置 Collapse 组件默认打开的选项卡。

# 单选 Collapse 预览及使用方法

标题1
标题2
标题3
<g-collapse :selected.sync="selectedTab" single>
    <g-collapse-item title="标题1" name="1">内容1</g-collapse-item>
    <g-collapse-item title="标题2" name="2">内容2</g-collapse-item>
    <g-collapse-item title="标题3" name="3">内容3</g-collapse-item>
</g-collapse>

data(){ return{ selectedTab : ['1'] } },

# 1、single

通过添加 single 属性来设置单选版效果,即同时只能打开一个选项卡,默认 false