DictTag

字典标签渲染组件，根据字典选项自动渲染对应的标签或文本。

基础用法

<script setup lang="ts">
import { DictTag, useDictOptions } from "vue-admin-kit";

const statusOptions = useDictOptions("sys_status");
</script>

<template>
  <!-- 基础用法 -->
  <DictTag :options="statusOptions" :value="row.status" />

  <!-- 多值（数组） -->
  <DictTag :options="typeOptions" :value="['1', '2', '3']" />

  <!-- 多值（逗号分隔字符串） -->
  <DictTag :options="typeOptions" :value="'1,2,3'" separator="," />

  <!-- 不显示未匹配的值 -->
  <DictTag :options="statusOptions" :value="row.status" :showValue="false" />
</template>

Props

属性	类型	默认值	说明
options	DictDataOption[]	-	字典选项数组
value	string | number | Array	-	当前值
showValue	boolean	true	未匹配时是否显示原值
separator	string	,	多值字符串的分隔符

配合 useDict 使用

import { useDict, useDictOptions } from "vue-admin-kit";

// 获取字典数据
const { dictData, loaded } = useDict("sys_status");

// 获取字典选项（用于 DictTag）
const statusOptions = useDictOptions("sys_status");