ElementUI 组件 Percentage 进度条

Percentage 进度条基础用法

其中 ：percentage 的值可以是变量（:percentage="percentageNum"）,不然也不能实时显示进度

重难点还是怎么实时获取后天进度、总量。思路就是：

　　1.后台设置一个全局变量，项目运行一步，这个全局变量就增加一下。通过函数获取全局变量实时数据。

　　2.前台首先设置一个定时器（setInterval），每隔一段时间获取一次后台全局变量的值，在页面进行更新显示。

后台代码

定义两个方法。一个获取全局变量返回前台显示。另一个方法处理项目需要的正常数据。

前台代码

这里是点击一个按钮触发事件后，处理需要的数据并实时显示进度

1 var proNum = setInterval(function(){ 2                     axios.post(host+'/groupData',{ 3                         method: 'checkProgress', 4                     }) 5                         .then(res=>{ 6                             if(res.data.result_code == "success"){ 7                                 that.progressNum = res.data.data; 8                                 that.percentageNum = (that.progressNum/that.strategyTotal)*100 9                     }10                     })11                 }, 1000);

1 axios.post( host+'/groupData',  { 2                     method:'addGroup', 3                     strategyNum: that.strategyNum, 4                 }) 5                 .then(res => { 6                     clearInterval(proNum); 7                     that.progressNum = 0; 8                     that.percentageNum = 0; 9                     if (res.data.result_code == "success") {10                         that.groupData = res.data.data;11                         //that.page = res.data.page;12                     } else {13                         that.$notify({ title: '警告', message: '连接异常', type: 'warning', duration: 4500, });14                     }15                 })