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);  //清除之前的定时器
        }
    },