使用枚举实现格式化代码的展现形式

枚举

src/constant 里面新建.js文件

export default{
 // 在职状态
   // 聘用形式
  hireType: [
    {
      id: 1,
      value: '正式'
    },
    {
      id: 2,
      value: '非正式'
    }
  ],
 xxxxx: [
    {
      id: '1',
      value: 'xxxxx'
    },
    {
      id: '2',
      value: 'xxxxx'
    },
......
  ],
}

import types from '@/constant/employees' //导入到.vue文件
const hireType = types.hireType
console.log(hireType) // [{id: 1,value: '正式'},{id: 2,value: '非正式'}]
const hireTypEnmu = hireType.reduce((acc, item) => { return { ...acc, [item.id]: item.value } }, {})
//acc代表初始值,,item每一项 
//...给空对象展开,然后return后面  {...acc,[item.id]: item.value }  返回一个{id:值,id:值}

methods里面:

 formatEmployment(a) {
      console.log(a)
      return hireTypEnmu[a]
    },

第二种方法:

export const difficulty = [
  {
    value: 1,
    label: '简单'
  },
  {
    value: 2,
    label: '一般'
  },
  {
    value: 3,
    label: '困难'
  }
]

1.在代码中引入 import { difficulty } from '@/api/xxxx/constants.js' 

2.

 computed: {
    difficulty () {
      return difficulty
    }
  },

3. 

总结:从已有一一对应的关系中，找出目标值，可以先把数组转对象，再通过对象的属性来快速获取值