需求：表格显示6条数据，默认2秒上翻一条。五秒获取一次新数据。

核心代码：

1.获取了一个名为TableContainer的引用，然后使用getElementById方法获取id为'table'的元素，并尝试获取该元素下的第一个div的第二个div。

2.判断data的长度是否大于6来决定是否执行后续操作。如果data长度大于6，则设置一个定时器timerRef，每2000毫秒执行一次回调函数

3.回调函数内部将容器元素向下滚动44个像素，并使用behavior属性设置平滑滚动的行为。

const initialScroll = (data: any) => {

    let container = TableContainer.current;

    container = document

      .getElementById('table')

      ?.getElementsByTagName('div')[0]

      ?.getElementsByTagName('div')[1];

    if (data.length > 6) {

      timerRef.current = window.setInterval(() => {

        container.scrollTo({

          top: container.scrollTop + Number(44),

          behavior: 'smooth',

        });

        if (

          Math.ceil(container.scrollTop) >= Number(container.scrollHeight - container.clientHeight)

        ) {

          container.scrollTop = 0;

        }

      }, 2000);

    }

  };

 4.在回调函数内还有一个判断条件，如果容器的scrollTop值等于容器的scrollHeight减去容器的clientHeight时，将scrollTop重置为0，实现了循环滚动的效果。

表格列的配置描述：

 const columns: any = [

    {

      title: '检测日期',

      dataIndex: 'checkTime',

      width: 105,

      ...styless,

      render(text: any, record: any, index: any) {

        return <span key={index}>{moment(text).format('MM-DD  HH:mm:ss')}</span>;

      },

    },

    {

      title: '姓名',

      dataIndex: 'name',

      ...styless,

      // width: 60,

      render(text: any, record: any, index: any) {

        return <>{text?.replace(/.$/, '*')}</>;

      },

    },

    {

      title: '企业名称',

      dataIndex: 'companyName',

      hideInTable: true,

      ...styless,

      width: 165,

    },

    {

      title: '检测项目数',

      dataIndex: 'total',

      // width: 80,

      ...styless,

    },

    {

      title: '通过项目数',

      dataIndex: 'frequency',

      ...styless,

      // width: 80,

      render(text: any, record: any, index: any) {

        return (

          <span key={index} style={record.total != text ? { color: '#FFA959' } : {}}>

            {text}

          </span>

        );

      },

    },

  ];

html部分

<Table

          id={'table'}

          ref={TableContainer}

          rowClassName={'hover-row'}

          columns={columns}

          dataSource={formData}

          pagination={false}

          locale={{ emptyText: '暂无数据' }}

          scroll={{

            y: 280,

            x: '100%',

            scrollToFirstRowOnChange: true,

          }}

          className={style.table}

          style={{ overflowY: 'hidden' }}

        />

最后：

根据data的长度自动滚动TableContainer元素。当data长度大于6时，每2秒自动滚动一次，滚动距离为44个像素，达到底部时返回顶部。

效果图