element-ui里el-progress：Invalid prop: custom validator check failed for prop "percentage"

项目里有一个需求是这样展示的：

上面的进度条我是用element-ui里的el-progress进度条的，这里面得到的百分比肯定是从后端拿到数据进行计算，然后绑定上去：

<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>

这么一来，控制台是不报错了，但是当计算出的百分值=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这个接口事件，将数据存在状态管理库里，进入这个页面直接去取。