avue 中字典的使用

Posted 2022-12-02 cwxblog

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