elmenetUI el-table内容自动滚动方案（一）定时器

table父组件

<template>
    <el-table
      v-bind="$attr"
      :data="data"
      :border="border"
      :stripe="stripe"
      height="100%"
      class="cus-table"
      style="width: 100%">
      <el-table-column v-if="colIndex" label="序号" type="index" width="66" align="center" ></el-table-column>
        <child :headAlign="headAlign" :subHeadAlign="subHeadAlign"  v-for="(item,index) in columns" :key="index" :col="item">
          <template #cusSlotScope="{row,cols}">
            <slot :data="row" :name="cols.slotName"></slot>
          </template>
        </child>
      <slot></slot>
    </el-table>
</template>

<script>
import child from "@/component/elTableCom/childTable.vue";
import { ref } from "vue";
let scrollHeight = 0;
let currentScrollTop = 0;
let maxScrollTop = 0;
let timeInter = null;
let timeInter2 = null;
const tableNode = ref(null);
export default {
  name: "elTableCom",
  props: {
    scrollNum: {
      type: [Number, String],
      default: 3,
    },
    wrapScroll: {
      type: [Boolean],
      default: false,
    },
    tableData: {
      type: [Array],
      default: ()=>{
        return [];
      },
    },
    colIndex: {
      type: [Boolean],
      default: false,
    },
    columns: {
      type: [Array],
      default: ()=>{
        return [];
      },
    },
    border: {
      type: [String, Boolean],
      default: false,
    },
    stripe: {
      type: [String, Boolean],
      default: false,
    },
    headAlign: {
      type: [String],
      default: "left",
    },
    subHeadAlign: {
      type: [String],
      default: "left",
    },
  },
  watch: {
    tableData: {
      handler: function (val) {
        this.data = val;
        this.$nextTick(function () {
          setTimeout(() => {
            this.initScroll(val);
          }, 1000);
        });
      },
      immediate: true,
      deep: true,
    },
  },
  data () {
    return {
      data: [],
    };
  },
  components: {child},
  mounted () {
  },
  beforeUnmount () {
    if (this.wrapScroll) {
      this.clearAllInterval();
    }
  },
  methods: {
    initScroll (tableData) {
      if (!this.wrapScroll) {
        return;
      }
      if (isNaN(this.scrollNum)) {
        return;
      }
      let num = Number(this.scrollNum);
      if (tableData && tableData.length > num) {
        // 获取滑动区域DOM 最新版本的element-plus节点有变化, 此版本为1.2.0-beta.3
        let dom = tableNode.value = document.querySelector(".cus-table").querySelector(".el-scrollbar__wrap");
        // 设置每次滑动几行
        scrollHeight = tableNode.value.querySelectorAll("tr")[0].offsetHeight * num;
        // 设置每次滑动的PX和滑动区域的高度
        tableNode.value.style.height = `${scrollHeight}px`;
        // 获取最大滑动空间
        maxScrollTop = tableNode.value.firstElementChild.offsetHeight - scrollHeight;
        dom.onmouseover = () => {
          this.clearAllInterval();
        }; //鼠标移入，停止滚动
        dom.onmouseout = () => {
          this.restTimeInter();
        }; //鼠标移出，继续滚动
        // 开始
        this.restTimeInter();
      }
    },
    restTimeInter () {
      // 清除所有定时器
      this.clearAllInterval();
      // 设置定时器
      timeInter = setInterval(this.setMultiLine, 4000);
    },
    clearAllInterval () {
      clearInterval(timeInter);
      clearInterval(timeInter2);
    },
    setScrollTop () {
      tableNode.value.scrollTop++;
      if (tableNode.value.scrollTop >= currentScrollTop) { // 达到下次应该滑动的位置
        clearInterval(timeInter2);
      }
      if (tableNode.value.scrollTop > maxScrollTop) { // 滑到底了
        tableNode.value.scrollTop = maxScrollTop;
        clearInterval(timeInter2);
      }
    },
    setMultiLine () {
      // 下次应该滑到哪
      currentScrollTop = (tableNode.value.scrollTop || 0) + scrollHeight + currentScrollTop % scrollHeight;
      if (tableNode.value.scrollTop >= maxScrollTop) { // 滑完了 重置
        currentScrollTop = 0;
        tableNode.value.scrollTop = 0;
        this.restTimeInter();
      } else {
        // 清除上一个定时器
        clearInterval(timeInter2);
        // 开始滑
        timeInter2 = setInterval(this.setScrollTop, 5);
      }
    },
  },
};
</script>

<style scoped lang="scss">
</style>

table子组件

<template>
    <el-table-column
      :type="col.type || null"
      :prop="col.prop || null"
      :label="col.label"
      :header-align="headAlign"
      :align="col.align"
      :width="col.width || null">
      <template #default="scope">
        <template v-if="col.children && col.children.length!==0">
          <childTable v-for="(item, i) in col.children"
                      :key=" item.prop + i"
                      :align="item.align"
                      :headAlign="headAlign || subHeadAlign"
                      :col="item">
          </childTable>
        </template>
        <template v-else-if="col.slot">
          <template v-if="col.slotName">
            <slot v-bind="{row:scope.row,cols:col}" name="cusSlotScope"></slot>
          </template>
        </template>
        <template v-else>{{scope.row[col.prop]}}</template>
      </template>
    </el-table-column>
</template>

<script>
export default {
  name: "childTable",
  props: {
    col: {
      type: [Object],
      default: ()=>{
        return {};
      },
    },
    headAlign: {
      type: [String],
      default: "left",
    },
    subHeadAlign: {
      type: [String],
      default: "left",
    },
  },
  data () {
    return {};
  },
  components: {},
  mounted () {
  },
  methods: {},
};
</script>