【前端】可视化大屏项目中Antd的table组件实现自动滚动和自定义斑马纹颜色

一、需求

在做前端可视化大屏项目的时候除了使用echarts绘制图表之外还需要很多表格展示数据，现有两个需求：
1、需要将表格内容实现自动滚动的效果；

2、表格是带斑马纹的，并且颜色需要自定义。
以下是我实现该功能的方法，希望对大家有所帮助！！！

二、代码展示

1、表格自动滚动逻辑代码

<template>
  <a-table
    class="ant-table-striped"
    :columns="columns"
    :data-source="dataSourse"
    ref="gateCloseTable"
    :pagination="false"
    :scroll="{ y: '14rem' }"
    size="small"
    :row-class-name="
      (record, index) => (index % 2 === 0 ? 'table-striped-1' : null)
    "
  />
</template>

<script setup>
import { ref, watch, onUnmounted } from "vue";
const dataSourse = ref([]);//表格数据
const gateCloseTable = ref(null);//获取表格实例 
const scrollTimer = ref(null);
const delayTimer = ref(null);

const col