vue枚举类型转换
分析:后端给到我们前端的是一个数字类型的状态码,每一个状态码(1、2)对应有中文我们通过枚举的方式转换成文字即可
1.可以在methods中定义方法
- 例如:
import EmployeeEnum from '@/constant/employees'
在methods中定义方法
methods: {
formatEmployment(id) {
// 对后端返回的类型的编码进行翻译 ,还原成 中文
const rs = EmployeeEnum.hireType.find(item => item.id === id)
return rs.value
},
在模板中使用
<el-table-column label="聘用形式">
<template slot-scope="scope">
类型:{{ formatEmployment(scope.row.formOfEmployment) }}
</template>
</el-table-column>
- 问题:这种方法对太消耗性能,每次使用都需要循环使用。
推荐方法:我们可以把数组转成 obj:{‘1’:‘value’, ‘2’:‘value’},然后用obj[“1”]就可以获取到,这样就可以减少性能的消耗。
- 例如:
// 导入枚举信息
import EmployeeEnum from '@/constant/employees'
const hireType = {}
EmployeeEnum.hireType.forEach(item => {
hireType[item.id] = item.value
})
函数中不再需要find,而直接返回对象的属性值``
formatEmployment(id) {
return hireType[id]
}
``只需要这样就可以实现(策略模式)`