首页 前端知识 [Vue warn]: Invalid prop: custom validator check failed for prop “percentage“ (element ui组件报错)

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

2024-06-02 09:06:37 前端知识 前端哥 533 882 我要收藏

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

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

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

  • 解决办法:
  1.  小编先确定了后端传的值是number类型的还是string类型的(一般针对于统计,后端都是传number类型的值,但是为了保险,小编也是接手的项目)
  2. 当确定是number数据类型的值,对传值进行处理

<el-progress
    :percentage="
        percentageOne > 100 ? 100 : percentageOne // 对数据处理,超过100的进度条全部展示100%
    "
    :format="format"
    :color="customColorOne"
    v-if="!isNaN(parseInt(percentageOne))" // 判断数据,对非发数据处理,防止再次因后端传的值报错
></el-progress>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/10487.html
评论
发布的文章

无涯教程-HTML5 - 表单标签

2024-06-08 00:06:06

HTML5基础2

2024-06-07 23:06:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!