摘要：
在日常开发中，我们会遇到很多枚举的值，这么枚举出来的值，我们可以统一处理，称为字典值的使用及翻译。我们使用这个返回的列表。后端保存也是状态码，同样的，在页面中需要显示了这个信息，显示的是男的对应状态码，而不是男这个汉字，这时候就需要翻译这个状态码。
在日常开发中，我们会遇到很多枚举的值，这么枚举出来的值，我们可以统一处理，称为字典值的使用及翻译。
比如说：需要提交表单，表单中有性别和国家选项，这就需要下拉选择框来实现。数据少一点的还可以直接手写，但是像国家城市这种比较多的，手写就不太友好了。这个时候需要后端通过某个接口返回这个枚举值。我们使用这个返回的列表。
翻译就是枚举值对应的汉字与状态码，对照使用。
比如说：在表单里面选择了，性别男，这个时候表单中传递给后端的并不是男，这个汉字，而是对应的状态码（code）。后端保存也是状态码，同样的，在页面中需要显示了这个信息，显示的是男的对应状态码，而不是男这个汉字，这时候就需要翻译这个状态码。
使用字典值首先需要封装
在api中定义接口
import { post } from '@/request/http.js'
//字典值
const newDictApi = data => post('/api/dictApi',{}, data)
export { newDictApi }在until中定义js函数postDict.js
import { newDictApi } from '@/API/api_newDict'
//查询字典
functiongetNewDict(e){
var dictList =JSON.parse(sessionStorage.getItem(e))
if(dictList){
returndictList
}else{
return new Promise((resolve)=>{
newDictApi({ type: e }).then(data=>{
if (data.code === 200) {
sessionStorage.setItem(e,JSON.stringify(data.data));
resolve(data.data)
}
})
})
}
}
//字典翻译
const translateDict = (list, e)=>{
var value = ''list.map(i =>{
if (i.code ==e) {
value =i.value
}
})
returnvalue
}
export { getNewDict,translateDict }在main.js中将翻译定义成全局函数
import { translateDict } from './utils/postDict'Vue.prototype.$translateDict =translateDict
newVue({
router,
store,})在某个页面中使用
<template>
<div>
<el-select
style=" 100%"v-model="personalForm.gender"clearable
placeholder="请选择性别"
>
<el-option
v-for="item in genderList":key="item.value":label="item.value":value="item.code"
></el-option>
</el-select>
<el-select
style=" 100%"v-model="personalForm.addressCountry"placeholder="请选择国家"clearable
>
<el-option
v-for="item in countryList":key="item.code":label="item.value":value="item.code"
></el-option>
</el-select>
<div>
使用翻译时候需要把后端返回的状态码code拿到，然后和对应的枚举值做匹配，翻译函数会将对应的值输出出来
{{$translateDict(genderList,scope.row.gender)}}
</div></div>
</template>
<script>
import { getNewDict } from '@/utils/postDict'export default{ data() { return{ countryList: [], genderList: [], } }, created() { this.init() }, mounted() {}, methods: { async init() { this.genderList = await getNewDict('gender')
this.countryList = await getNewDict('country') }, }, } </script>