vue+elementUi实现将数字转化为 对应的字符串内容

文章目录

• • 1、实现的效果
  • 2、template
  • 3、方法中的数据
  • 4、实际运用

1、实现的效果

数据库状态字段

vue前端效果

2、template

prop是你的数据库的字段名称

     <el-table-column
        prop="status"
        label="状态"
      />

3、方法中的数据

主要代码：

    this.tableData.map(function (val) {

            if(val.status === 0){
              val.status = '待取车'

            }else if(val.status === 1){
              val.status = '超时'
            }else if(val.status === 2){
              val.status = '完成'
            }else if(val.status === 3){
              val.status = '待还车'
            }

          })

4、实际运用

      showAllUsers(currentPage, pageSize) {  //异步请求显示所有数据

        currentPage = currentPage ? currentPage : this.now;
        pageSize = pageSize ? pageSize : this.size;
        axios.get("调用后端的接口" + currentPage + "/" + pageSize).then(res => {
          console.log(res)

          this.tableData = res.data.data.result.orders;
          this.tableData.map(function (val) {

            if(val.status === 0){
              val.status = '待取车'
            }else if(val.status === 1){
              val.status = '超时'
            }else if(val.status === 2){
              val.status = '完成'
            }else if(val.status === 3){
              val.status = '待还车'
            }

          })
          this.total = res.data.data.result.totals;
        });
      }