element-ui里el-progress：Invalid prop: custom validator check failed for prop "percentage" 上面的进度条我是用element-ui里的el-progress进度条的，这里面得到的百分比肯定是从后端拿到数据进行计算，然后绑定上去： //假设后端返回的数据分别有Online/Total <el-progress :text-inside="true" :stroke-width="24" :percentage="parseInt((Online/Total)*100)" // 计算百分比 status="success" ></el-progress> 然后运行发现控制台报错： 想了一下，这个问题是由于dom已经渲染完成了，而数据还没回来，所以组件检测不到这个必传的参数，那就给组件上加一个v-if： <el-progress :text-inside="true" :stroke-width="24" :percentage="parseInt((Online/Total)*100)" // 计算百分比 v-if="parseInt((Offline/Total)*100))" // 监测有值的时候渲染 status="success" ></el-progress> 1 这么一来，控制台是不报错了，但是当计算出的百分值=0的时候，这个0就转化成了false，这个进度条自然就没了，所以： <el-progress :text-inside="true" :stroke-width="24" :percentage="parseInt((Online/Total)*100)" // 计算百分比 v-if="!isNaN(parseInt((Offline/Total)*100)))" // 监测有值并且为数字的时候渲染 status="success" ></el-progress> 用isNaN监测，计算出来是不是为数字，这样就好了，因为图展示方便，将表达式写在了行间，最好是写在计算属性里。 就酱儿 一分钟以后我想了一下，上面这样写有点傻，写一个公共的布尔值showProgress: false，在接口返回数据后再让它showProgress = true，用这一个变量来v-if就好了。 隔了半个小时，我又想了一下，用一个公共的变量来处理的话，如果接口返回数据成功，但是少了某一个进度条的数据字段，那计算完了还是报错，但是第一种办法就不会，如果没返回某个字段，那这个进度条就消失，正好。 主要看需求。 我又想了一下，这个不是dom渲染在数据回来之前吗，这个接口请求可以放在Vuex里面请求，然后在入口页App.vue里面commit这个接口事件，将数据存在状态管理库里，进入这个页面直接去取。 ———————————————— 版权声明：本文为CSDN博主「慢半拍、」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/huanhuan03/article/details/103924501