DictTag 字典标签

字典标签组件，用于根据字典值显示对应的标签样式。

🎯 在线演示：https://vue.youlai.tech/#/demo/dictionary

功能特性

• 🏷️ 自动渲染 - 根据字典值自动显示对应的标签
• 🎨 样式支持 - 支持 Element Plus 的多种标签类型
• 📦 按需加载 - 自动按需加载字典数据
• 🔄 响应式 - 字典值变化时自动更新显示

基础用法

<template>
  <DictTag code="gender" v-model="gender" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const gender = ref(1)
</script>

在表格中使用

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="gender" label="性别">
      <template #default="{ row }">
        <DictTag code="gender" v-model="row.gender" />
      </template>
    </el-table-column>
    <el-table-column prop="status" label="状态">
      <template #default="{ row }">
        <DictTag code="status" v-model="row.status" />
      </template>
    </el-table-column>
  </el-table>
</template>

不同尺寸

<template>
  <div class="demo-tags">
    <DictTag code="status" v-model="status" size="large" />
    <DictTag code="status" v-model="status" size="default" />
    <DictTag code="status" v-model="status" size="small" />
  </div>
</template>

<script setup lang="ts">
const status = ref(1)
</script>

标签类型

DictTag 会根据字典项配置的 tagType 自动显示对应的标签样式：

tagType	效果
primary	主要标签（蓝色）
success	成功标签（绿色）
warning	警告标签（橙色）
danger	危险标签（红色）
info	信息标签（灰色）
无	普通文本显示

API

Props

属性	类型	默认值	说明
code	string	-	字典编码（必填）
modelValue	string | number	-	字典项的值
size	'large' | 'default' | 'small'	'default'	标签尺寸

字典数据格式

后端返回的字典数据需要包含 tagType 字段：

[
  { "value": "1", "label": "启用", "tagType": "success" },
  { "value": "0", "label": "禁用", "tagType": "danger" }
]

与 DictSelect 配合使用

<template>
  <el-form :model="form">
    <!-- 表单中使用 DictSelect 选择 -->
    <el-form-item label="状态">
      <DictSelect v-model="form.status" code="status" />
    </el-form-item>
  </el-form>

  <!-- 详情展示使用 DictTag -->
  <el-descriptions>
    <el-descriptions-item label="状态">
      <DictTag code="status" v-model="form.status" />
    </el-descriptions-item>
  </el-descriptions>
</template>

注意事项

1. 字典编码：code 属性必须与后端配置的字典编码一致
2. 按需加载：组件会自动按需加载字典数据，无需手动预加载
3. 无样式回退：如果字典项没有配置 tagType，将显示为普通文本

相关链接

• DictSelect 字典选择器
• 字典管理