解决前端项目场景问题：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 回调函数 
<span>平均到场时长（h）</span>
<span> {{ repairState.dcHours }}</span>
            <el-progress
              :format="format"
              :text-inside="true"
              :show-text="true"
              :stroke-width="24"
              :percentage="repairState.dcHours"
            >
</el-progress>

---

完整代码：

 <!-- 进度条 -->
//html
         <div ref="bar" class="w100 h100" >
            <span>平均到场时长（h）</span>
            <span> {{ repairState.dcHours }}</span>
            <el-progress
              :format="format"
              :text-inside="true"
              :show-text="true"
              :stroke-width="24"
              :percentage="repairState.dcHours"
            >
            </el-progress>
          </div>

          <div ref="bar" class="w100 h100 statbugheight">
            <span>到场超时次数（次）</span>
            <span> {{ repairState.dcCsCs }}</span>
            <el-progress
              :format="format"
              :text-inside="true"
              :show-text="true"
              :stroke-width="24"
              :percentage="repairState.dcCsCs"
            ></el-progress>
          </div>

          <div ref="bar" class="w100 h100 pjguzangbug">
            <span>平均故障修复时长（h）</span>
            <span> {{ repairState.clHours }}</span>
            <el-progress
              :format="format"
              :text-inside="true"
              :show-text="true"
              :stroke-width="24"
              status="success"
              :percentage="repairState.clHours"
            ></el-progress>
          </div>

          <div ref="bar" class="w100 h100 guzangbug">
            <span>故障修复超时次数（次）</span>
            <span> {{ repairState.wcCsCs }}</span>
            <el-progress
              :format="format"
              :text-inside="true"
              :show-text="true"
              :stroke-width="24"
              :percentage="repairState.wcCsCs"
              status="success"
            ></el-progress>
          </div>
          <!-- 进度条 -->


//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踩坑：数据过多下拉菜单多长_意初的博客-优快云博客vue3+ElementPlus踩坑：数据过多下拉菜单多长在dropdown里设置个属性。max-height菜单最大高度string / numberhttps://blog.youkuaiyun.com/weixin_43928112/article/details/126451501