React+Antd实现表格自动向上滚动

1、效果

2、环境

1、react18

2、antd 4+

3、代码实现

原理：创建一个定时器，修改表格ant-table-body的scrollTop属性实现滚动，监听表层的元素div的鼠标移入和移出实现实现鼠标进入元素滚动暂停，移出元素的时候表格滚动继续。

一、滚动组件实现如下，

TypeScript 复制代码

/**
 * 公共组件：表格滚动
 */
import { Table } from 'antd';
import { useEffect, useRef } from 'react';

/**
 * 表格滚动组件
 * @param {Number} props.rollTime 表格每次滚动间隔时间 单位ms
 * @param {Number} props.rollNum 表格超过指定条数开始滚动
 * @param {Number} props.rollTop 表格每次滚动的高度 单位px
 * @param {Boolean} props.flag 是否滚动
 * @returns
 */
const ScrollTable = (props: any) => {
  const {
    dataSource,
    rollTime = 100,
    rollNum = 10,
    rollTop = 2.5,
    flag = true,
  } = props;
  let timer: any = null;
  const tableContainer = useRef();

  // 开启定时器
  const initialScroll = (data: any) => {
    let container: any = tableContainer.current;
    container = container.getElementsByClassName('ant-table-body')[0];
    if (data.length > Number(rollNum) && flag) {
      // 只有当大于10条数据的时候 才会看起来滚动
      let time = setInterval(() => {
        container.scrollTop += Number(rollTop);
        if (
          Math.ceil(container.scrollTop) >=
          Number(container.scrollHeight - container.clientHeight)
        ) {
          container.scrollTop = 0;
        }
      }, Number(rollTime));
      timer = time;
    }
  };

  useEffect(() => {
    initialScroll(dataSource);
    return () => {
      clearInterval(timer);
    };
  }, []); // 检测数组内变量 如果为空 则监控全局

  return (
    <div
      onMouseOver={() => {
        clearInterval(timer);
      }}
      onMouseOut={() => {
        initialScroll(dataSource);
      }}
    >
      <Table
        rowKey="id"
        ref={tableContainer}
        pagination={false}
        scroll={{
          y: 500,
          x: '100%',
          scrollToFirstRowOnChange: true,
        }}
        {...props}
      />
    </div>
  );
};
export default ScrollTable;

二、调用该组件

TypeScript 复制代码

/**
 * 示例： 滚动表格示例
 */
import ScrollTable from '@/components/ScrollTable';
import clsx from 'clsx';

const COLUMNS = [
  {
    dataIndex: 'index',
    valueType: 'indexBorder',
    width: 48,
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
];
const DATA_SOURCE = new Array(30).fill(0).map((item, index) => ({
  id: index + 1,
  name: `张三-${index}`,
  labels: `labels-${index}`,
  age: index,
  address: `武汉-${index}`,
}));

const ScrollTableExample = () => {
  return (
    <div className={clsx(['w-1/3', 'h-full', 'px-6', 'py-6', 'text-white'])}>
      <ScrollTable dataSource={DATA_SOURCE} columns={COLUMNS} />
    </div>
  );
};
export default ScrollTableExample;