[Vue warn]: Invalid prop: custom validator check failed for prop “percentage“ (element ui组件报错)

最新推荐文章于 2025-04-02 15:40:42 发布

❆VE❆

最新推荐文章于 2025-04-02 15:40:42 发布

阅读量4.1k

点赞数 10

分类专栏： bug 文章标签： vue.js bug 前端 elementui 数据类型

本文链接：https://blog.youkuaiyun.com/qq_45796592/article/details/137643719

版权

bug 专栏收录该内容

15 篇文章

订阅专栏

文章讲述了在项目检查中遇到的Vue警告，关于percentage属性的验证失败，原因是ElementUIProgress组件期望的percentage值为0-100的number类型，但后端传入了超出范围的值。解决方法是通过数据处理确保值在有效范围内并进行了适当的条件判断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：今天检查项目时候发现如下报错——[Vue warn]: Invalid prop: custom validator check failed for prop "percentage"：大概意思是percentage校验错误

查找到原因：该项目中使用elementui的 Progress 进度条组件，从而导致的报错

通过查找官方文档发现：该组件的参数类型为number类型；值的范围在0-100之间，但是由于小编的项目后端传的值大于100，并且前一任前端没有处理该值，从而导致的报错

解决办法：

小编先确定了后端传的值是number类型的还是string类型的（一般针对于统计，后端都是传number类型的值，但是为了保险，小编也是接手的项目）
当确定是number数据类型的值，对传值进行处理

<el-progress
    :percentage="
        percentageOne > 100 ? 100 : percentageOne // 对数据处理，超过100的进度条全部展示100%
    "
    :format="format"
    :color="customColorOne"
    v-if="!isNaN(parseInt(percentageOne))" // 判断数据，对非发数据处理，防止再次因后端传的值报错
></el-progress>