vue中将后台返回的数字转换成对应的文字

在前后端交互的过程中经常会遇到的一个问题，就是后端返回的是数字，前端页面例如类别一栏里应展示文字，前端就必须把后端传的 0,1,2,3转化为文字展示在页面上。

有以下解决方案：

首先用map遍历后台返回的数据利用里面的回调对数据进行解析即可，下面直接上代码

        this.tableData.map(function (val) {
          if (val.status == 0) {
            val.status = '提交中'
          } else if (val.status == 1) {
            val.status = ‘招募中’
          } else if (val.gender == 2) {
            val.status = '已完成’
          } else {
            return ‘实施中’
          }
        })

this.tableData.forEach(item => {
  if (item.status == 0) {
    item.status = "冻结";
  } else if (item.status == 1) {
    item.status = "正常";
  }
});

这样就可以在页面上显示了

第二种方法

<el-table
:data="tableData"
border>
    <el-table-column
        prop="status"
        :show-overflow-tooltip="true"
        label="状态"
        width="60"
        :formatter="statusFormatter"
      >
     </el-table-column>
</el-table>
<script>
    export default{
        data(){
            return{
                tableData:[]
            }
        },
        methods:{
            statusFormatter(row, column){
                const status = row.status
                  if (status == 0) {
                    return '正常'
                  } else if (status == 1) {
                    return '待审批'
                  } else if (status == 2) {
                    return '拒绝'
                  } else if (status == 3) {
                    return '锁定'
                  } else {
                    return '删除'
                  }
            }
        }
    }
</script>

3.直接写

<el-table-column prop="valucation" label="评估价值" width="200">
    <template slot-scope="scope">
        <span>
            {{scope.row.valucation == 0 ?'司法评估‘ ： ’内部评估‘}}
        </span>
    </template>
</el-table-column>