根据后端返回数字枚举状态

1.项目需求中常见的后端给的数字代表不同的状态,需要前端本地枚举对应

如图所示:

后端接口定义如下

status: 2,//类型：Number 必有字段 备注：开团单状态 -1 全部 2 拼团中 3 拼团成功 4 拼团失败

2.解决方法

2.1 本地定义枚举data数据

 groupType: [
        { value: -1, label: '全部' },
        { value: 2, label: '开团中' },
        { value: 3, label: '拼团成功' },
        { value: 4, label: '拼团失败' }
      ],

2.2 用find方法根据返回数据筛选数据

  // 枚举拼团状态
    getGroupTypeValue(typeArr, typeLab) {
      const found = typeArr.find(item => item.value === typeLab)
      return found ? found.label : ''
    },

2.3模板区域

<el-table-column prop="status" align="center" label="拼团状态">
    {{ getGroupTypeValue(groupType, scope.row.status) }}  
</el-table-column>