element-table实现自动循环滚动

<template>
    <div>
        <mg-table ref='mgTable' v-if='data.length' :data='data' stripe :height='height' :header-cell-style='headerCellStyle' border='' @header-dragend='headerDragend' style='width: 100%;'>
            <template v-for='column in columns'>
                <mg-table-column v-if='column.prop !=="production_progress"' :width='column.prop === "product_order_sign" ? 80 :""' show-overflow-tooltip v-bind='column' :key='column.prop'>
                    <template slot-scope='scope'>
                        <slot :name='`body-cell-${column.prop}`' :row='scope.row' :col='column'>
                            <span v-if='column.prop!=="warehousing_status"'>{{ scope.row[column.prop] }}</span>
                            <span v-else :style='{"color": (scope.row[column.prop].includes("逾期") ? "red" : "#fff")}'>{{ scope.row[column.prop] }}</span>
                        </slot>
                    </template>
                </mg-table-column>
                <mg-table-column v-else show-overflow-tooltip v-bind='column' :key='column.prop'>
                    <template slot='header'>
                        <span>生产进度</span>
                    </template>
                    <template slot-scope='scope'>
                        <el-progress :format='format(scope.row)' :show-text='false' :text-inside='true' :stroke-width='15' :percentage='scope.row.production_progress'></el-progress>
                    </template>
                </mg-table-column>
            </template>
        </mg-table>
    </div>
</template>

<script>
// **********原理:通过定时器不断改变scrollTop来实现自动滚动，使用两倍的数据，一旦第一次的滚动完毕，将scrollTop置为0
import { storageKey, maxRollTime } from 'assets/constant'
import { updateLocalStorage } from 'assets/untils.js'
import { Table, TableColumn } from 'element-ui'
import { mapState } from 'vuex'
const scope = process.env.APP_SCOPE_NAME
export default {
    components: {
        'mg-table': Table,
        'mg-table-column': TableColumn
    },
    watch: {
        height (val) {
            this.height = val
        }
    },
    props: {
        col: {
            type: Array,
            default: () => []
        },
        tableData: {
            type: Array,
            default: () => []
        },
        height: {
            type: Number,
            default: 185
        },
        scroll: {
            type: Boolean,
            default: false
        },
        tableKey: {
            type: String,
            default: ''
        },
        fontBigger: {
            // 加大号字体
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            containEl: null, // 获取表格的body部分
            trHeight: null, // 表格的行高
            // workStatus,
            storageKey,
            headerCellStyle: {
                'font-size': '12px'
            },
            rowHeight: 50
        }
    },
    computed: {
        ...mapState(scope, ['scrollMilSeconds']),
        scrollable () {
            // 用户设定的滚动时间不超过最大值才进行滚动
            return this.scroll && this.scrollMilSeconds <= maxRollTime
        },
        data () { // 1.根据表格定义的高度和行高来确定需要滚动的行数
            // 需要滚动，且data数超过表格高度
            let dataLen = this.tableData.length
            let scrollLen = this.height / this.rowHeight - 2 // 表格滚动需要的数据行数
            if (this.scrollable && dataLen > scrollLen) {
                return this.tableData.concat(this.tableData) // 滚动时，用两倍data
            } else {
                return this.tableData
            }
        },
        columns () {
            let obj = JSON.parse(localStorage.getItem(this.storageKey))
            return this.col.map(item => {
                let col = {
                    prop: item.field,
                    label: item.label,
                    align: 'center',
                    resizable: true
                }
                if (obj && obj[this.tableKey] && obj[this.tableKey][item.prop]) {
                    col.width = obj[this.tableKey][item.prop]
                }
                return col
            })
        }
    },
    mounted () {
        setTimeout(_ => {
            this.setScroll()
        }, 20)
    },
    beforeDestroy () {
        this.containEl = null
        this.trHeight = null
        this.scrollable && this.interval && clearInterval(this.interval)
    },
    methods: {
        format (val) {},
        setScroll () {
            this.$nextTick(_ => {
                if (this.scrollable) {
                    this.containEl = this.$refs.mgTable.$el.querySelector(
                        '.el-table__body-wrapper'
                    ) // container元素设置scrollTop
                    let tr = this.$refs.mgTable.$el.querySelector(
                        '.el-table__body-wrapper tr'
                    )
                    if (!this.containEl || !tr) {
                        return
                    }
                    this.trHeight = tr.offsetHeight // 行高
                    // 2.每20ms滚动一次
                    this.interval = setInterval(this.autoScroll, this.scrollMilSeconds)
                }
            })
        },
        headerDragend (newWidth, oldWidth, column) {
            updateLocalStorage(this.storageKey, {
                key: this.tableKey,
                data: { [column['property']]: newWidth }
            })
        },
        autoScroll () {
            if (this.containEl.scrollTop >= (this.tableData.length) * this.trHeight) {
                // 3.确保第一次滚动滚动到了底部 scrollTop表示滚动条向下滚动时，上面超出部分的高度
                this.containEl.scrollTop = 0
            } else {
                this.containEl.scrollTop++
            }
        }
    }
}
</script>

<style lang="stylus">
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(46, 144, 253, 0.1);
}

/* table边框背景色 */
.el-table th {
  color: #fff;
  background: rgba(46, 144, 253, 0.3);
  font-size: 1.48vh !important;
  height: 4.63vh;
  line-height: 4.63vh;
  font-family: ping;
}

.el-table tr {
  background-color: rgba(6, 29, 61, 0);
  height: 4.63vh;
  line-height: 4.63vh;
  font-family: ping;
}

.el-table, .el-table__expanded-cell {
  background-color: rgba(6, 29, 61, 0);
}

.el-table td, .el-table th.is-leaf {
  border-bottom: none;
}

.el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
  border-right: none;
}

.el-table--border, .el-table--group {
  border: none;
}

.el-table--border::after, .el-table--group::after, .el-table::before {
  background-color: rgba(6, 29, 61, 0);
}

.el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: #182F4A;
}

.el-table {
  color: #fff;
  font-size: 1.48vh !important;
}

.el-table thead {
  color: #003166;
}

.el-table td, .el-table th {
  padding: 0;
}

.el-table .cell, .el-table th div, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
  padding-left: 2px;
}

.el-table .cell, .el-table th div {
  padding-right: 2px;
}

.el-table .cell {
  height: 3.68vh;
  line-height: 3.68vh;
  white-space: nowrap;
}

.el-table--scrollable-y .el-table__body-wrapper {
  // overflow: hidden;
}

.el-table--border th.gutter:last-of-type {
  border: none;
}

@font-face {
  font-family: ping;
  src: url('~assets/ping.OTF');
}
</style>
<style>
.el-progress-bar__outer {
  margin-top: 1.4vh;
  height: 6px;
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  position: relative;
  vertical-align: middle;
}
.el-progress-bar__inner {
  background-image: linear-gradient(
    to right,
    rgba(7, 141, 190, 1),
    rgba(7, 190, 154, 1)
  );
}
</style>