TagGroup 标签组

简介

用于批量展示标签，支持自定义每个标签的属性、显示数量、自动宽度计算、超出部分折叠为"+"展示。可灵活配置全局默认 props 及单独标签 props。

基本用法

属性说明

属性	说明	类型	可选值	默认值
data	标签数据源，数组，每项为对象	array	—	[]
displayField	指定显示内容的字段名	string	—	label
tagProps	所有标签的默认 props（可被 item 覆盖）	object	—	{}
visibleTags	最多显示多少个标签，超出折叠	number	—	2
autoWidth	是否根据最大宽度自动计算可见标签数	boolean	true / false	true
maxWidth	自动宽度时的最大宽度（px），不传则自适应父元素宽度（自动扣除父元素padding）	number/null	—	null

插槽

名称	说明
plus	自定义"+"折叠内容

用法示例

<TagGroup
  :data="[
    { label: '标签1', type: 'primary' },
    { label: '标签2', type: 'success', size: 'large' },
    { label: '标签3', closable: true },
  ]"
  displayField="label"
  :tagProps="{ size: 'small', closable: false }"
  :visibleTags="2"
/>

说明

• 每个标签的 props 优先级：组件内置默认 < tagProps < data 中 item。
• 超出 visibleTags 的标签会折叠为"+"，可通过 plus 插槽自定义内容。
• 支持自动宽度计算，设置 autoWidth 为 true 时，maxWidth 不传则会自动根据父元素宽度自适应（自动扣除父元素 padding），适用于表格、弹窗等自适应布局。