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

今天遇到一个问题就是性别一栏后台返回我的是数字,但是前端展示的是汉字男女,而且0,1,2,对应不同的汉字,下面跟大家分享一下我的方法
首先用map遍历后台返回的数据利用里面的回调对数据进行解析即可,下面直接上代码

		this.usersData.map(function (val) {
          if (val.gender == 0) {
            val.gender = '人妖'
          } else if (val.gender == 1) {
            val.gender = '男'
          } else if (val.gender == 2) {
            val.gender = '女'
          } else {
            return
          }
        })

这样就可以直接在页面中显示了~
还有一种方式

<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>
Logo

前往低代码交流专区

更多推荐