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

╰半橙微兮° 2023-06-29 05:37 53阅读 0赞

项目里有一个需求是这样展示的：  
![在这里插入图片描述][20200110145030613.png]  
上面的进度条我是用element-ui里的el-progress进度条的，这里面得到的百分比肯定是从后端拿到数据进行计算，然后绑定上去：

<el-progress 
    	:text-inside="true" 
    	:stroke-width="24" 
    	:percentage="parseInt((Online/Total)*100)"       // 计算百分比
    	status="success"
     ></el-progress>

然后运行发现控制台报错：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]  
想了一下，这个问题是由于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这个接口事件，将数据存在状态管理库里，进入这个页面直接去取。

[20200110145030613.png]: https://img-blog.csdnimg.cn/20200110145030613.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200110145502447.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70