字典值映射后展示

1、创建枚举字段的管理者对象

// 创建枚举字段的管理者对象
export const = getEnumManager (name, enums)=> {
  const labels = enums.map((item) => item.label);
  const values = enums.map((item) => item.value);
  return {
    name,
    labels,
    values,
    enums,
    getValueByLabel (label) {
      return values[labels.indexOf(label)];
    },
    getLabelByValue (value: any) {
      return labels[values.indexOf(value)];
    },
    getItemByValueOrLabel (number ) {
      let index = values.indexOf(number);
      if (index < 0) {
        index = labels.indexOf(number);
      }
      return enums[index];
    },
  }
}
//  使用
import { getEnumManager } from '@/utils/enums.js';
const orderStatusEnum = getEnumManager('orderStatus', [
  { value: 0, label: '已完成', color: green,
    operation: ['checkDetail', 'download'] },
  { value: 1, label: '待支付', color: orange,
    operation: ['pay', 'cancel'] },
  { value: 2, label: '已取消', color: gray,
    operation: ['checkDetail'] }
]);
...
const tabelData = res.data.map(item => {
  // 将字典值映射为label
  return Object.assign({}, item, {
    label: orderStatusEnum.getLabelByValue(item.orderSataus)
  })
})

链接：https://juejin.cn/post/7193526127573336123