需求说明:这个是在之前的公司参与开发的一个系统中,发现在别人构建的项目中有一个字典翻译功能,在工作中经常使用到:比如列表页的状态翻译、不同状态对应不同颜色等等,因为有的时候后端返回的接口可能只有状态值,没有状态说明,这时候添加字典就很有用,只要在配置文件中设置好状态值对应的说明,以及状态值对应的颜色,通过简单调用就可以实现想要的效果
一、如何使用
(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这些来判断当前的状态说明和样式,如果只有两三种状态还好,有的状态有十来个状态值,都写判断的话会让页面的代码有点乱,通过添加字典配合过滤属性处理,可以方便快捷的实现想要的效果。
这个是我自己查了一些资料,参考一些开发博主的全局过滤器效果,思考改变思路后实现的,也已经用在项目里面,可以达到我想要的效果,写一下留个记录,希望可以给遇到这样需求的开发小伙伴们提供个思路。