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

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;
        });
      }
posted on   热爱技术的小郑  阅读(246)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示