The page reports an error: Invalid prop: custom validator check failed for prop “percentage“.

question:

Using the el-progress component of the element-component library, the page renders normally, but an error is reported on the console:

The problem code is as follows:

 <el-progress  
    :percentage="enforced" 
    :show-text="false" 
    :color="enforcedColor(enforced)">
</el-progress>

 Cause of the problem:

 This is because the percentage attribute value passed to the component exceeds 100. The official document states that the value range of percentage is 0-100.

Solution:

Because the percentage attribute value exceeds 100, when the component is rendered, the rendered progress bar is the 100% progress bar , so the ternary operator can be used to solve this problem. The code is as follows:

<el-progress 
 :percentage="enforced>100? 100 : enforced" 
 :show-text="false" 
 :color="enforcedColor(enforced)">
</el-progress>