- 问题:今天检查项目时候发现如下报错——[Vue warn]: Invalid prop: custom validator check failed for prop "percentage":大概意思是percentage校验错误
![](https://www.qianduange.cn/upload/article/5c354b40d0d54e869c82cfe01ad4ad24.png)
- 查找到原因:该项目中使用elementui的 Progress 进度条组件,从而导致的报错
![](https://www.qianduange.cn/upload/article/7e99b191a52f45d3bec9159691757a4b.png)
- 通过查找官方文档发现:该组件的参数类型为number类型;值的范围在0-100之间,但是由于小编的项目后端传的值大于100,并且前一任前端没有处理该值,从而导致的报错
![](https://www.qianduange.cn/upload/article/17123e9a01c44fc59f5eb1ee5973cef6.png)
![](https://www.qianduange.cn/upload/article/25a9d96e6a4342aca74a758408d4f5d0.png)
- 小编先确定了后端传的值是number类型的还是string类型的(一般针对于统计,后端都是传number类型的值,但是为了保险,小编也是接手的项目)
- 当确定是number数据类型的值,对传值进行处理
![](https://www.qianduange.cn/upload/article/973cd087931748a8ad33b3102a731d22.png)
<el-progress
:percentage="
percentageOne > 100 ? 100 : percentageOne // 对数据处理,超过100的进度条全部展示100%
"
:format="format"
:color="customColorOne"
v-if="!isNaN(parseInt(percentageOne))" // 判断数据,对非发数据处理,防止再次因后端传的值报错
></el-progress>