一、问题:
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>