vue 使用字典值及其翻譯

在日常開發中，我們會遇到很多枚舉的值，這么枚舉出來的值，我們可以統一處理，稱為字典值的使用及翻譯。

比如說：需要提交表單，表單中有性別和國家選項，這就需要下拉選擇框來實現。數據少一點的還可以直接手寫，但是像國家城市這種比較多的，手寫就不太友好了。這個時候需要后端通過某個接口返回這個枚舉值。我們使用這個返回的列表。

翻譯就是枚舉值對應的漢字與狀態碼，對照使用。

比如說：在表單里面選擇了，性別男，這個時候表單中傳遞給后端的並不是男，這個漢字，而是對應的狀態碼（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'
// 查詢字典
function getNewDict(e){
  var dictList = JSON.parse(sessionStorage.getItem(e)) 
  if(dictList){
    return dictList
  }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
    }
  })
  return value
}
export { getNewDict,translateDict }

 在main.js中將翻譯定義成全局函數

import { translateDict } from './utils/postDict'
Vue.prototype.$translateDict = translateDict

new Vue({
    router,
    store,
})

在某個頁面中使用

<template>
  <div>
    <el-select
    style="width: 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="width: 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>