在实际开发中，有些可选的字段通常是用数字来代替文字进行存储，而前端显示的时候又使用的是文字，所以在avue中，字典通常作为这些字段(下拉框，多选，单选)的处理。
1.1 在当前的页面列中直接填写
适用数量较少的选项
column: [{ label: "经营状态", prop: "businessStatus", type: "select", dicData: [ {
label: "正常", value: 1, }, { label: "异常", value: 2, } ], hide: false }],
1.2 统一写入dict.js 导出
// dict.js export const INDUSTRY_TYPE= [ { label:"请选择行业", value:0 }, {
label:"农，林，牧，渔业", value:1 }, { label:"采矿业", value:2 }] // component.vue import
* as dict from '@/const/dict' column: [{ label: "行业", prop: "industry", hide:
false, type: 'select', dicData: INDUSTRY_TYPE, }]
1.3 后台接口引入
// 直接通过dicUrl引入api 接口 column: [{ label: '字典', prop: 'text', props: { //
配置接口数据对应字典中的label和value label: 'name', value: 'code' }, // dicUrl:
`${baseUrl}/getProvince`, dicUrl: 'api/system-areas/provices' // 前后端分离的api 模块接口
dicMethod:'get', dicQuery:{ code: 1 }, span:24, type:'select' }] //
第二种可以将自己相关接口的数据存到vuex中， // 然后指定label和value对应的值就可以了 { label: "创建人", prop:
"createId", type: "select", props: { label: 'username', value: 'id' }, dicData:
this.$store.getters.userList },
今日推荐