前端字典工具使用

字典工具提供了便捷的方式来管理和使用系统字典数据,通过 useDict 函数和 dict-tag 组件实现字典数据的获取和展示。

useDict 函数

字典类型对应 sys_dict 表中的字典数据。

import { useDict } from '/@/hooks/dict';

const { 字典类型A, 字典类型B } = useDict('字典类型A', '字典类型B');
数据类型要求

Element Plus 的 radio 和 select 等组件对 value 字段有强制的数据类型要求。实体字段应该使用字符串而不是数字类型来对应字典功能使用。

页面使用 dict-tag

在表格列中使用 dict-tag 组件展示字典数据:

<el-table-column>
  <template #default="scope">
    <dict-tag :options="字典类型" :value="scope.row.xx"></dict-tag>
  </template>
</el-table-column>