CheckTag 可选标签组件

可选标签组件，基于 Element Plus CheckTag 的封装组件，支持单选和多选模式，适用于标签选择场景。

基础用法

WCheckTag 组件支持单选和多选两种模式，通过 multiple 属性控制。

单选模式

单选模式下，只能选择一个选项，且不能取消选中（只能切换选择）。

多选模式

多选模式下，可以选择多个选项，支持取消选中。

不同类型

通过 tagProps 可以为每个选项配置不同的类型（如 success、info、warning、danger）。

禁用状态

支持组件级别和选项级别的禁用状态。组件级禁用优先级大于选项级禁用。

字段映射

通过 props 属性可以自定义 options 中的字段名，支持不同的数据结构。

Space 组件属性

通过 spaceProps 属性可以配置 ElSpace 组件的属性，控制标签之间的间距和布局。

值验证和过滤

单选模式值验证

单选模式下，如果 modelValue 不在 options 中，会自动清空为 null。

多选模式值过滤

多选模式下，会自动过滤掉不在 options 中的值，只保留有效值。

API

属性

支持 ElCheckTag 所有的属性。

拓展属性：

参数	说明	类型	默认值
options	选项列表（必填）	CheckTagOption[]	-
multiple	是否多选（默认 false，单选）	boolean	false
modelValue	当前值（单选：TagValue，多选：TagValue[]）	TagValue | TagValue[]	-
props	字段映射配置（用于自定义 options 中的字段名）	TagFieldProps	{ label: 'label', value: 'value' }
spaceProps	Space 组件属性（用于配置标签之间的间距和布局）	Partial<ElSpaceProps>	-

Element Plus CheckTag 属性：

参数	说明	类型	默认值
disabled	是否禁用（组件级别）	boolean	false
type	类型	'success' | 'info' | 'warning' | 'danger'	''

CheckTagOption 配置

options 数组中每一项的配置类型。

参数	说明	类型	默认值
label	标签文本（如果使用默认字段映射）	string	-
value	标签值（如果使用默认字段映射）	unknown	-
disabled	单个选项是否禁用	boolean	false
tagProps	标签属性（传递给 ElCheckTag 的属性）	Partial<ElCheckTagProps>	-
[key: string]	允许其他自定义字段	any	-

TagFieldProps 配置

props 字段映射配置。

参数	说明	类型	默认值
label	标签文本字段名	string	'label'
value	标签值字段名	string	'value'

ElSpaceProps 配置

spaceProps Space 组件属性配置，支持 ElSpace 所有的属性。

常用属性：

参数	说明	类型	默认值
size	间距大小	number | string | [number, number]	8
direction	排列方向	'horizontal' | 'vertical'	'horizontal'
wrap	是否自动换行	boolean	false
fill	是否填充容器	boolean	false

事件

事件名	说明	参数
update:modelValue	值更新事件（v-model）	(value: TagValue | TagValue[]) => void
change	值变化事件	(value: TagValue | TagValue[]) => void

事件说明：

• change：值变化时触发，单选模式返回 TagValue，多选模式返回 TagValue[]