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