vue枚举类型转换(策略模式)

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]
    }

``只需要这样就可以实现(策略模式)`

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梁智超奶奶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值