在实际开发中,有些可选的字段通常是用数字来代替文字进行存储,而前端显示的时候又使用的是文字,所以在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 },
 

技术
©2019-2020 Toolsou All rights reserved,
【贪心算法】哈夫曼编码问题VHDL——JK触发器react 项目--博客系统数据库期末复习:综合应用题汇总面过了,起薪30k找出游戏的获胜者(java)JAVA实验四集合与函数式编程实验排序会了递归,不学非递归太可惜了SQL综合题 员工单位综合题数据库作业五