vue项目中使用字典

　　需求说明：这个是在之前的公司参与开发的一个系统中，发现在别人构建的项目中有一个字典翻译功能，在工作中经常使用到：比如列表页的状态翻译、不同状态对应不同颜色等等，因为有的时候后端返回的接口可能只有状态值，没有状态说明，这时候添加字典就很有用，只要在配置文件中设置好状态值对应的说明，以及状态值对应的颜色，通过简单调用就可以实现想要的效果

 

一、如何使用

（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这些来判断当前的状态说明和样式，如果只有两三种状态还好，有的状态有十来个状态值，都写判断的话会让页面的代码有点乱，通过添加字典配合过滤属性处理，可以方便快捷的实现想要的效果。

　　这个是我自己查了一些资料，参考一些开发博主的全局过滤器效果，思考改变思路后实现的，也已经用在项目里面，可以达到我想要的效果，写一下留个记录，希望可以给遇到这样需求的开发小伙伴们提供个思路。