avue 中字典的使用

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