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這個接口事件，將數據存在狀態管理庫裏，進入這個頁面直接去取。