Select Group 分组选择器

基于 Radix Vue 的 Combobox 组件封装，支持分组、多选、搜索和一键全选的企业级分组选择器组件。

组件特性

📦 分组展示：支持数据分组展示，支持折叠与展开。
✅ 多选与全选：支持多选模式，并提供分组级的一键全选功能。
🔍 本地搜索：内置本地搜索过滤功能，可快速查找选项。
📋 表单集成：完美集成 BrForm，支持必填、数量等复杂校验规则。
🎨 主题定制：基于 BrConfigProvider 支持全局主题定制。

基础用法

基础的单选与分组折叠功能。

Example

多选与全选

支持多选模式，开启 show-group-select-all 后可以在分组头部进行一键全选/取消全选操作。

Example

搜索过滤

开启 filterable 属性后，支持对选项进行本地搜索过滤。

Example

与表单集成

在表单中的典型应用，支持结合 BrForm 进行数据校验。

Example

API 说明

BrSelectGroup

属性	类型	默认值	说明
modelValue (v-model)	`string \| number \| (string \| number)[]`	-	绑定的值
defaultValue	`string \| number \| (string \| number)[]`	-	默认值
options	`SelectGroupItem[]`	`[]`	数据源选项
disabled	`boolean`	`false`	是否禁用整个选择器
placeholder	`string`	`'Please select'`	占位符提示文字
size	`'sm' \| 'default' \| 'lg'`	`'default'`	组件尺寸
error	`boolean`	`false`	是否处于错误状态
clearable	`boolean`	`false`	是否支持清空选项
filterable	`boolean`	`false`	是否开启本地搜索过滤
multiple	`boolean`	`false`	是否开启多选模式
loading	`boolean`	`false`	是否处于加载中状态
emptyText	`string`	`'No data'`	数据为空时的提示文字
showGroupSelectAll	`boolean`	`false`	是否显示分组级别的全选按钮（仅多选模式有效）
collapsible	`boolean`	`false`	是否允许分组折叠
zIndex	`number`	-	弹出层的 z-index

SelectGroupItem (Options)

属性	类型	默认值	说明
group	`string`	-	分组名称
disabled	`boolean`	`false`	是否禁用该分组
collapsible	`boolean`	`false`	是否允许折叠该分组（优先级高于全局配置）
collapsed	`boolean`	`false`	初始化时是否默认折叠
options	`SelectGroupOptionType[]`	`[]`	分组内的选项列表

SelectGroupOptionType

属性	类型	默认值	说明
label	`string`	-	选项显示文本
value	`string \| number`	-	选项绑定的值
disabled	`boolean`	`false`	是否禁用该选项

事件 (Emits)

事件名	回调参数	说明
change	`(value: string \| number \| (string \| number)[] \| undefined)`	选项发生改变时触发
clear	`()`	点击清空按钮时触发
search	`(query: string)`	搜索关键词发生变化时触发
group-toggle	`(group: string, collapsed: boolean)`	分组折叠状态发生改变时触发