element-ui里el-progress：进度条问题的解决Invalid prop: custom validator check failed for prop "percentage

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