Group 分组容器

avue-group 提供带标题的可折叠区域，也可单独用于表单或说明区分组。

效果预览可直接操作下方示例

collapse 为 true 表示展开，false 表示收起。用户点击标题后通过 change 读取展开状态。

正在加载示例…

<template>
  <el-switch v-model="expanded" active-text="展开分组" />
  <avue-group label="基础信息" :collapse="expanded" @change="expanded = $event.includes(1)">
    <p>分组内容可以放置表单、说明文字或自定义组件。</p>
    <el-tag>当前状态：{{ expanded ? '展开' : '收起' }}</el-tag>
  </avue-group>
</template>

<script setup>
import { ref } from 'vue'
const expanded = ref(true)
</script>

Props

参数	说明	类型	默认值
label	标题文本	string	—
icon	标题图标	string	—
collapse	控制展开状态，true 为展开	boolean	true
arrow	是否允许用户折叠；false 时禁用折叠交互	boolean	true
header	是否显示标题区域	boolean	true
display	是否渲染整个分组	boolean	true
card	当前版本保留属性，未参与模板样式处理	boolean	false

Events

事件	参数	说明
change	activeNames: number[]	展开时包含 1，收起时为空数组；不会触发 update:collapse

需要在外部同步状态时，可使用 @change="collapse = $event.includes(1)"。组件没有专属公开实例方法。

Slots

名称	说明
default	分组内容
header	替换标题内容；需保持 header: true
tabs	折叠区域之前的附加内容