【Vue + ElementUI】完美解决 el-progress percentage 超过100报错及百分比格式化显示处理

最新推荐文章于 2025-06-12 13:52:33 发布

原创最新推荐文章于 2025-06-12 13:52:33 发布 · 9.7k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementUI #el-progress #percentage

前端开发同时被 3 个专栏收录

18 篇文章

订阅专栏

Vue

17 篇文章

订阅专栏

ElementUI

4 篇文章

订阅专栏

本文介绍了一种在Vue框架中优化进度条显示的方法，通过计算已完成部分与目标的比例，确保进度条准确反映任务完成情况。文章详细解释了如何处理除数和被除数为零的情况，避免错误，并通过三目运算限制进度条的最大值为100%，同时提供了format选项以适应不同显示需求。

<el-progress :percentage="computedPercentage(scope.row) >= 100 ? 100 : computedPercentage(scope.row)" :format="computedPercentage(scope.row, 1)"></el-progress>

computedPercentage(row, format){
      if(!row.yearComplete || !row.yearTarget){
        if(format){
          return () => {
            return 0 + '%'
          }
        }else{
          return 0
        }
      }
      else{
        if(format){
          return () =>{
            return Number((row.yearComplete / row.yearTarget * 100).toFixed(2)) + '%'
          }
        }else{
          return Number((row.yearComplete / row.yearTarget * 100).toFixed(2))
        }
      }
    },

需要注意以下几点：

1、判断除数和被除数为0直接返回0 否则会报错 Expected Number with value NaN

2、percentage 超过100 组件验证报错，通过三目运算让超过100的进度条都显示为100

3、format 需要返回一个function 类型，所以返回套在function 里，在此function 内部返回值