需求說明：這個是在之前的公司參與開發的一個系統中，發現在別人構建的專案中有一個字典翻譯功能，在工作中經常使用到：比如列表頁的狀態翻譯、不同狀態對應不同顏色等等，因為有的時候後端返回的介面可能只有狀態值，沒有狀態說明，這時候新增字典就很有用，只要在配置檔案中設定好狀態值對應的說明，以及狀態值對應的顏色，通過簡單呼叫就可以實現想要的效果

一、如何使用

（1）首先在專案的src目錄下建立一個dictionary.js的檔案，然後在檔案中寫入狀態欄位物件，然後將內容暴露出去如下：

// 本地字典
export default {
  // 修改記錄審批狀態
  approvalStatus: {
    
 
0: '待審批',
    1: '審批通過',
    2: '審批駁回',
    3: '取消申請'
  },
  // 審批狀態字型顏色
  approvalColor: {
    0: '#00FFFF',
    1: '#00FF00',
    2: '#FF2A00',
    3: '#cccccc'
  }
}

這裡面的approvalStatus和approvalColor是狀態值對應的描述說明物件和狀態值對應的顏色說明物件，在頁面使用時會用到

（2）然後在專案的入口檔案main.js中，引入配置好的字典檔案，這裡我是配合全域性過濾器一起使用，將狀態值對應的狀態說明返回，程式碼如下：

import dictionary from '@/dictionary.js'


//
 
 全域性過濾器，配合本地字典一起使用
Vue.filter('dict', function (filterStr, filterNm) {
  let getStr = String(filterStr)
  let returnVal = ''
  const dicAry = Object.entries(dictionary)
  if (!getStr.includes(',')) {
    dicAry.forEach(item => {
      if (filterNm === item[0]) {
        Object.entries(item[1]).forEach(forItem => {
          
 
if (getStr === forItem[0]) {
            returnVal = forItem[1]
          }
        })
      }
    })
  } else {
    // 這裡是如果返回的狀態存在多個，以逗號','返回的狀態說明就是多個說明拼接起來的
    let strAry = getStr.split(',')
    strAry.forEach(item => {
      dicAry.forEach(item2 => {
        if (filterNm === item2[0]) {
          Object.entries(item2[1]).forEach(forItem => {
            if (item === forItem[0]) {
              returnVal += forItem[1]
            }
          })
        }
      })
    })
  }
  return returnVal
})

下面的else部分程式碼，是因為我的接口裡面有返回的狀態值是多個，然後以逗號‘，’分隔，狀態對應的值是①②③這樣的，UI想要的效果是①②這樣連線的，所以我做了拼接處理，這裡可以根據自己專案需求進行改動即可

（3）最後則是如何在vue元件中使用了，程式碼如下：

// 在data()中定義並引入全域性過濾器 
dict: Vue.filter('dict')

html部分：
<span
    class="ctr-li-nm"
    style="width: 200px"
    :style="{'color': dict(item.status, 'approvalColor')}"
    >
    {{ item.status | dict("approvalStatus") }}
</span>

　　這樣就可以對列表的狀態進行翻譯以及不同狀態的樣式處理了，我個人認為，表格中的資料會非常多，如果在行上面用v-if或者:class這些來判斷當前的狀態說明和樣式，如果只有兩三種狀態還好，有的狀態有十來個狀態值，都寫判斷的話會讓頁面的程式碼有點亂，通過新增字典配合過濾屬性處理，可以方便快捷的實現想要的效果。

　　這個是我自己查了一些資料，參考一些開發博主的全域性過濾器效果，思考改變思路後實現的，也已經用在專案裡面，可以達到我想要的效果，寫一下留個記錄，希望可以給遇到這樣需求的開發小夥伴們提供個思路。