解决前端项目场景问题：vue+element进度条el-progress渲染后端动态数据

项目场景：

vue+element进度条el-progress渲染后端动态数据

---

问题描述

percentage：百分比

format：指定文字内容

给它们前面加一个：（冒号），进行回调函数。将数据传给el-progress进度条

---

核心代码：

//js
//平均时长和次数，数据渲染到repairState里
    getrepairOrderStatistics() {
      this.$inter
        .getrepairOrderStatistics({
          wxdw: this.wxdw,
          sj: this.sj,
          gzfl: this.gzfl,
          xzqh: this.xzqh,
        })
        .then((res) => {
          console.log(res);
          this.repairState = res.data.data;
        });
    },

//data。定义数据
repairState: {
        clHours: 0,
        dcCsCs: 0,
        dcHours: 0,
        wcCsCs: 0,
      },

//html 回调函数 
平均到场时长（h）
 {{ repairState.dcHours }}
            

---

完整代码：

 
//html
         

            平均到场时长（h）
             {{ repairState.dcHours }}
            
            
          

          

            到场超时次数（次）
             {{ repairState.dcCsCs }}
            
          

          

            平均故障修复时长（h）
             {{ repairState.clHours }}
            
          

          

            故障修复超时次数（次）
             {{ repairState.wcCsCs }}
            
          
          


//data
 repairState: {
        clHours: 0,
        dcCsCs: 0,
        dcHours: 0,
        wcCsCs: 0,
      },

//js
 //进度条
    format(repairState) {
      return `${repairState}`;
    },
//平均时长和次数
    getrepairOrderStatistics() {
      this.$inter
        .getrepairOrderStatistics({
          wxdw: this.wxdw,
          sj: this.sj,
          gzfl: this.gzfl,
          xzqh: this.xzqh,
        })
        .then((res) => {
          console.log(res);
          this.repairState = res.data.data;
        });
    },

---

作者上一篇文章，

vue3+ElementPlus踩坑：数据过多下拉菜单多长_意初的博客-CSDN博客vue3+ElementPlus踩坑：数据过多下拉菜单多长在dropdown里设置个属性。max-height菜单最大高度string / numberhttps://blog.csdn.net/weixin_43928112/article/details/126451501