Dict 字典组件

基于字典编码自动加载选项数据，免去手动请求接口和缓存管理。在线演示

DictSelect

用于表单输入，支持下拉、单选、复选三种形式。

<DictSelect v-model="gender" code="gender" />

<script setup lang="ts">
// gender 字典：1=男, 2=女, 3=未知
const gender = ref(1)
</script>

通过 type 切换展示形式：

<DictSelect v-model="gender" type="radio" code="gender" />
<DictSelect v-model="hobbies" type="checkbox" code="hobby" />

Props

参数	说明	类型	默认值
code	字典编码（必填）	string	—
modelValue	绑定值（v-model）	string | number | any[]	—
type	展示类型	"select" | "radio" | "checkbox"	"select"
placeholder	占位文本	string	"请选择"
disabled	是否禁用	boolean	false
style	自定义样式	object	{ width: "300px" }

v-model 类型

select 和 radio 绑定单值（string | number），checkbox 绑定数组。

DictTag

根据字典值展示对应文字和标签样式，用于只读场景。

<DictTag :model-value="gender" code="gender" />

表格中使用：

<el-table-column label="性别" prop="gender">
  <template #default="{ row }">
    <DictTag :model-value="row.gender" code="gender" />
  </template>
</el-table-column>

Props

参数	说明	类型	默认值
code	字典编码（必填）	string	—
modelValue	字典项的值	string | number	—
size	标签尺寸	"large" | "default" | "small"	"default"

标签样式

DictTag 根据字典项的 tagType 字段渲染颜色：

tagType	效果
primary	蓝色
success	绿色
warning	橙色
danger	红色
info	灰色
未配置	纯文本（无标签）