Vue项目报错：Invalid prop: custom validator check failed for prop "percentage".

一、问题：

vue中使用elementui的 Progress 进度条组件报错

二、报错信息如下：

vue.runtime.esm.js:619 [Vue warn]: Invalid prop: custom validator check failed for prop "percentage".

found in

---> <ElProgress> at packages/progress/src/progress.vue
       <AllStoreStatisticsDialog> at src/components/vdialog/dialog/Baomu/AllStoreStatisticsDialog.vue
         <Dialog> at src/components/vdialog/VDialog.vue
           <DialogGroup> at src/components/vdialog/vDialogGroup.vue
             <App> at src/views/SYS/App.vue
               <App> at src/App.vue
                 <Root>

三、原因与解决方案

原始代码如下

<el-progress :percentage="percentage" :color="customColor"></el-progress>

原因：

设置的percentage属性值超过了100，percentage的取值范围是0-100。

解决方案

percentage属性赋值的时候做一个三元运算的判断就可以了，代码如下

<el-progress :percentage="percentage>100?100:percentage" :color="customColor"></el-progress>
posted @ 2021-12-29 15:18  清和时光  阅读(6665)  评论(0)  编辑  收藏  举报