【Vue + ElementUI】完美解决 el-progress percentage 超过100报错及百分比格式化显示处理
<el-progress :percentage="computedPercentage(scope.row) >= 100 ? 100 : computedPercentage(scope.row)" :format="computedPercentage(scope.row, 1)"></el-progress>computedPercentage(row, fo
·
<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 内部返回值
更多推荐
已为社区贡献2条内容
所有评论(0)