DictTag 字典标签

基于系统字典数据渲染的标签组件，用于在表格中显示字典值对应的标签文本。

基础用法

<template>
  <DictTag :value="row.status" dictType="sys_user_status" />
</template>

<script setup>
import { DictTag } from '@/components/Dict'
</script>

Props

参数	类型	默认值	说明
value	string | number	-	字典值（必填）
dictType	string	-	字典类型（必填）

完整示例

<template>
  <el-table :data="tableData">
    <el-table-column prop="username" label="用户名" />
    <el-table-column prop="status" label="状态">
      <template #default="{ row }">
        <DictTag :value="row.status" dictType="sys_user_status" />
      </template>
    </el-table-column>
    <el-table-column prop="gender" label="性别">
      <template #default="{ row }">
        <DictTag :value="row.gender" dictType="sys_user_gender" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue'
import { DictTag } from '@/components/Dict'

const tableData = ref([
  { username: '张三', status: '0', gender: '1' },
  { username: '李四', status: '1', gender: '0' }
])
</script>

注意事项

1. 字典类型：dictType 对应后端字典类型表的 dict_type 字段
2. 数据缓存：组件会自动缓存字典数据，避免重复请求
3. 回退显示：如果字典值不存在，会原样显示值

相关组件

• DictSelect - 字典下拉选择器
• DictRadio - 字典单选组