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

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

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>
相关文章
|
14小时前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
14小时前
|
JavaScript
vue里样式不起作用的方法,可以通过deep穿透的方式
vue里样式不起作用的方法,可以通过deep穿透的方式
14 0
|
14小时前
|
JavaScript
vue打印v-model 的值
vue打印v-model 的值
|
14小时前
|
JavaScript
Vue实战-组件通信
Vue实战-组件通信
7 0
|
15小时前
|
JavaScript
Vue实战-将通用组件注册为全局组件
Vue实战-将通用组件注册为全局组件
7 0
|
14小时前
|
JavaScript 前端开发
vue的论坛管理模块-文章评论02
vue的论坛管理模块-文章评论02
|
14小时前
|
JavaScript Java
vue的论坛管理模块-文章查看-01
vue的论坛管理模块-文章查看-01
|
14小时前
|
JavaScript
VUE里的find与filter使用与区别
VUE里的find与filter使用与区别
18 0
|
14小时前
|
移动开发 JavaScript 应用服务中间件
vue打包部署问题
Vue项目`vue.config.js`中,`publicPath`设定为&quot;/h5/party/pc/&quot;,在线环境基于打包后的`dist`目录,而非Linux的`/root`。Nginx代理配置位于`/usr/local/nginx/nginx-1.13.7/conf`,包含两个相关配置图。
vue打包部署问题
|
14小时前
|
JavaScript 前端开发
iconfont 图标在vue里的使用
iconfont 图标在vue里的使用
17 0