在前后端交互的过程中经常会遇到的一个问题,就是后端返回的是数字,前端页面例如类别一栏里应展示文字,前端就必须把后端传的 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>

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐