GroupedSelect 分组选择

左栏分类 + 右栏选项的分组下拉；适合材质、品类等多维枚举。对齐 Showcase 单选 / 多选。

示例

单选

选择材料

多选

可多选

<script setup lang="ts">
import { ref } from 'vue'
import { RdGroupedCategorySelect, type CategoryGroup } from '@rd-element/ui'

const demoMaterialSingle = ref<string | null>(null)
const demoMaterialMulti = ref<(string | number)[]>([])

const options: CategoryGroup[] = [
  { key: 'leather', label: '皮质', children: [{ value: 'calf', label: '小牛皮' }, { value: 'sheep', label: '羊皮' }] },
  { key: 'metal', label: '金属', children: [{ value: 'gold', label: '黄金' }] },
]
</script>

<template>
  <div class="grouped-select-demo">
    <div class="grouped-select-demo__row">
      <span class="grouped-select-demo__label">单选</span>
      <RdGroupedCategorySelect v-model="demoMaterialSingle" :options="options" placeholder="选择材料" clearable class="grouped-select-demo__control" />
    </div>
    <div class="grouped-select-demo__row">
      <span class="grouped-select-demo__label">多选</span>
      <RdGroupedCategorySelect v-model="demoMaterialMulti" :options="options" multiple placeholder="可多选" :max-tag-count="3" class="grouped-select-demo__control" />
    </div>
  </div>
</template>

API

Attributes

属性名	说明	类型	默认值
v-model	选中值	string | number | (string|number)[] | null	—
options	分组选项	CategoryGroup[]	—
multiple	多选	boolean	false
placeholder	占位文案	string	'请选择'
maxTagCount	多选展示标签上限	number	3

Events

事件名	说明	类型
update:modelValue	值变更	(value) => void
change	值变更	(value) => void