数据字典
字典把数据中的值转换为可读标签,并为新增、编辑中的选择器提供选项。先确认字段和值的类型,再选择 dicData 或 dicUrl。
请求配置
网络字典需要在安装 Avue 时传入项目的 Axios 实例。本页请求本站固定的 JSON 文件,不依赖外部业务接口,也不会修改全局 Axios。
import axios from 'axios';
app.use(Avue, { axios });更多配置参考 Form 组件数据字典。
本地字典与网络字典
dicData 直接传入数组;dicUrl 从接口加载数组;返回字段不是 label / value 时,通过 props 映射。点击「切换首行状态」,查看保存的数字值和表格标签同步变化。
示例的 status 和字典中的 value 都使用数字,省份和字典中的 code 都使用字符串。若表格只显示原始值,先检查字段映射和两侧类型是否一致;不要把合法的数字 0 当作空值。
按当前行加载字典
3.9.5+
普通字典列的 dicUrl、dicQuery、dicHeaders 包含模板变量时,会按当前行解析参数并保存各行的字典。适合租户、部门等上下文不同,但字段编码相同的表格。
两行的状态都为 0,但所属租户不同,因此显示不同标签。先切换首行状态,再切换首行租户,观察表格和下方的解析记录。dicUrl 选择本站 JSON 文件,dicQuery 传入当前字段值。
模板变量从哪里取值
| 使用场景 | {{key}} 的来源 | 示例 |
|---|---|---|
| 普通逐行字典列 | 当前行的当前字段,即 row[column.prop] | status 列中为 row.status |
通过 cascader 关联的子字段 | 上级字段的值 | 城市字典中为 row.province |
remote: true 的远程搜索 | 当前输入的搜索词 | 输入「张」时搜索「张」 |
普通逐行字典中的 {{字段名}} | 当前行的对应字段 | {{tenantId}} 取 row.tenantId |
dicQuery 和 dicHeaders 的模板值使用完整占位符,例如 { tenant: '{{tenantId}}' }。GET 请求使用查询参数,其他请求方法使用请求体;dicUrl 可以把占位符放在路径中。
使用边界
- 逐行字典适用于普通 CRUD 字典列。级联子列、
remote: true、lazy: true和dicFlag: false的列仍走各自的加载流程。 - 模板引用的值为空时,不请求该行字典;数字
0是有效值。列表数据或模板依赖字段改变后会重新加载,无需手动拼接每行 URL。 - 每个逐行字典列会针对列表中的各行发起请求。数据量大时,优先分页,或使用通用
dicData,避免不必要的请求。 - 示例 JSON 是固定演示数据。接入业务时,将路径换成自己的接口,让接口根据参数返回字典;不需要复制解析记录面板。
省、市、区字典联动
父字段的 cascader 指向子字段的 prop。城市接口中的 {{key}} 使用省份编码,区县接口中的 {{key}} 使用城市编码。点击「切换首行地区」重新加载级联标签,也可以点击「编辑」逐级选择并保存。
列表首次赋值、分页取回数据或外部修改级联值后,在 Vue 更新数据后加载用于表格回显的级联字典:
data.value = records;
await nextTick();
await crud.value.dicInit('cascader');父列配置的是 cascader: ['city'],字段名必须与子列的 prop 一致。城市、区县保存各自的编码。外部代码修改父级时,也应清空子级或同步写入匹配的子级值;本例切换按钮同时写入一组有效的省、市、区编码。
