Skip to content

c7-dict-tag 字典标签组件

基于 Element Plus 的 el-tag 组件进行封装,用于展示字典数据的标签组件。支持多种数据格式和自定义样式。

主要用于展示字典数据,支持单个值、数组值、分隔符字符串等多种格式

基础用法

最基本的用法,展示单个字典值:

数组值展示

支持数组格式的值,可以同时展示多个标签:

分隔符字符串

支持以分隔符分隔的字符串格式:

未匹配值处理

当传入的值在选项列表中找不到匹配项时,可以选择是否显示原始值:

自定义样式

支持通过 elTagClass 属性自定义标签样式:

条件渲染


Events(事件)

该组件为展示型组件,不提供事件。


插槽

该组件不提供插槽。


注意事项

  1. 数据格式modelValue 支持字符串、数字、数组等多种格式
  2. 选项匹配:组件会根据 value 字段进行精确匹配
  3. 未匹配处理:当值在选项中找不到匹配时,会根据 showValue 属性决定是否显示原始值
  4. 样式优先级elTagClass 的优先级高于 elTagType
  5. 分隔符处理:字符串格式的值会按照 separator 进行分割处理

完整示例


Attributes(属性)

属性名说明类型可选值默认值
modelValue绑定值,支持 String/Number/ArrayString | Number | Array''
options选项数据列表Array[]
showValue当未找到匹配的数据时,是否显示原始值Booleantrue
separator分隔符,用于解析字符串格式的值String','

options 数据结构

属性名说明类型可选值默认值
label标签显示文本String
value标签值String | Number
elTagTypeElement Plus 标签类型String'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info''default'
elTagClass自定义 CSS 类名String''