el-table表格行状态进度条

一、场景引入

项目某些表格，需要展示每条数据不同进度状态，使用进度条来展示

二、解决方案

利用定时器+el-progress组件，列表数据需要返回数据总时间，计算得出进度

代码如下：

getTableData() {
            let _that = this;
            if (this.showLoading) {
                this.loading = true;
            }
            const { url, method, start, size } = this;
            const params = {
                ...this.params,
                start,
                size,
            };
            this.$http({ url, method, params })
                .then(res => {
                    this.clearAll(this.timeArry);  //清除之前的定时器
                    let dataBody = this.encryptionFlag ? res : res.body;
                    this.loading = false;
                    this.total = dataBody.count || 0;
                    this.end =
                        parseInt((this.currentPage - 1) * this.size + this.size) > this.total
                            ? this.total
                            : parseInt((this.currentPage - 1) * this.size + this.size);
                    let _that = this
                    //给每一列生成一个时间戳
                    dataBody.data.forEach(row => {
                            // 总任务时间秒数 = 任务截止时间 - 任务开始时间
                            const startEnd = new Date(row.sendEndTime).getTime() - new Date(row.sendTime).getTime()
                            // 剩余时间秒数 = 任务截止时间 - 服务器当前时间
                            row.waitTime = new Date(row.sendEndTime).getTime() - new Date(row.nowTime).getTime()
                            // 任务状态
                            row._taskStatus = row.taskStatusif (row.waitTime > 0) {
                                row.waitTime = row.waitTime - 1000;
                                if (row._taskStatus == xxx) {
                                    let per = parseInt(((startEnd - row.waitTime) / startEnd) * 100);
                                    row.percent = per < 1 ? 1 : per >= 99 ? 99 : per;
                                }
                                row.countInterval = setInterval(() => {
                                    row.waitTime = row.waitTime - 1000;
                                    if (row._taskStatus == xxx) {
                                        let per = parseInt(((startEnd - row.waitTime) / startEnd) * 100);
                                        row.percent = per < 1 ? 1 : per >= 99 ? 99 : per;
                                    }
                                }, 1000);
                                this.timeArry.push(row.countInterval)
                            } else {
                                if (row.waitTime == 0 && (row.sendEndTime || row.nowTime)) {
                                    // sendEndTime/nowTime都为null，waitTime为0，无限刷新列表。此处需注意判断条件
                                    // 剩余时间为0更新列表
                                    _that.update()
                                }
                                if (row.waitTime <= 0) {
                                    if (row._taskStatus == 2 || row._taskStatus == 3 || row._taskStatus == 5) {
                                        row.percent = 99;
                                    }
                                }
                                clearInterval(row.countInterval)
                                row.countInterval = null
                            }
                    })
                    this.tableData = dataBody.data;
                    this.$emit('returnData', this.tableData);
                    this.$emit('returnCount', this.total);
                    this.$emit('returnCurrentPage', _that.currentPage);
                    //部分table操作删除，重新定位当前页码
                    if (this.tableData.length == 0 && this.currentPage != 1) {
                        this.update(this.currentPage - 1);
                    }
                })
                .catch(() => {
                    this.loading = false;
                });
        },

为一个定时器数组 timeArry ，在列表数据返回时做数据处理，每一行加入定时器；剩余时间为0时更新列表数据

update(val = 1) {
            this.currentPage = val;
            this.start = this.size * (val - 1);
            this.getTableData();
        },

注意，组件销毁时需清空定时器

// 清除所有定时器
        clearAll(list) {
            list.forEach(el => {
                clearInterval(el)
                el = null;
            })
            this.timeArry = []
        },

beforestory钩子

beforeDestroy() {
        if (this.timeArry && this.timeArry.length) {
            this.clearAll(this.timeArry);  //清除之前的定时器
        }
    },

场景二、列表单独展示倒计时，代码如下：

页面：

<el-table-column label="剩余逾期时间" align="center" prop="intervalTime">
     <template slot-scope="scope">
       <span style="color: red"> <i class="el-icon-time"></i>{{scope.row.intervalTime}}</span>
     </template>
</el-table-column>

js部分：

//获取数据，在获取数据的时候调用绑定列计时
getList() {
      this.loading = true;
      listCirculation(this.queryParams).then(response => {
        this.circulationList = response.rows;
        this.total = response.total;
        this.loading = false;
        if(this.circulationList.length > 0){
          this.circulationList.forEach((el)=>{
            this.countDown(el)
          })
        }
      });
   },
    /** 倒计时*/
    countDown(row) {
    // acceptanceOverTime 是我后台返回的截止时间
      if(row.status == 1){
        let thi = this;
        setInterval((thi) => {
          row.intervalTime =  thi.formatDuring(new Date(row.acceptanceOverTime) - new Date());
        }, 10000); //这边采取的是10秒调用一次
        //这里采用简单写法，直接在查询的时候调用一次，不用等定时器调用
        row.intervalTime = this.formatDuring(new Date(row.acceptanceOverTime) - new Date());
      }
    },
    formatDuring (mss) {
      if(mss > 0){
        let hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) // 得到小时
        let minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60)) // 得到分钟数
        //获取分钟
        let str1 = minutes < 10 ? ('0' + minutes) : minutes
        
        /*得到秒数
        let seconds = (mss % (1000 * 60)) / 1000
        let str2 = seconds < 10 ? ('0' + seconds) : seconds*/
        return hours + '小时' + str1 + '分钟';
      }else{
        return '已逾期';
      }
    },