纯功能自定义表格（可自动滚动）

import React, { useEffect, useRef, useState } from 'react';
import { Row, Col } from 'antd';

interface CustomTableProps {
  /** 表头 */
  column: any;
  /** 数据 */
  dataSource: any;
  /** 表格内容样式 */
  dataClassName: any;
  /** 表头样式 */
  columnClassName: any;
  /** 表头背景图片 */
  src?: any;
  /** 表格内容间隔线颜色 */
  dividerColor?: string;
  /** 表格高度 */
  height?: string;
  /** 移动速度 */
  speed?: number;
}

const CustomTable = (props: CustomTableProps) => {
  const {
    column = [],
    dataSource = [],
    dataClassName,
    columnClassName,
    src,
    dividerColor = '1px solid #085261',
    height = '100%',
    speed,
  } = props;
  const ref1 = useRef<any>();
  const ref2 = useRef<any>();
  const data = [...dataSource];
  let time: any = 0;
  const [a, setA] = useState(0);
  const [childTran, setChildTran] = useState(0);
  const scrollTop1 = useRef(0);
  const autoScroll = () => {
    if (speed) {
      time = setInterval(() => {
        scrollTop1.current++;
        let childHeight = ref1?.current?.offsetHeight;
        if (scrollTop1.current >= (childHeight + 12) / 2) {
          scrollTop1.current = 0;
          setChildTran(scrollTop1.current);
          ref2.current.innerHTML = '';
          ref2.current.innerHTML = ref1.current.innerHTML;
        }
        setChildTran(scrollTop1.current);
        setA(time);
      }, speed);
    } else {
      return;
    }
  };

  useEffect(() => {
    if (speed) {
      ref2.current.innerHTML = ref1.current.innerHTML;
      autoScroll();
    }

    return () => {
      clearInterval(a);
    };
  }, [speed]);

  return (
    <div>
      {src && <img src={src} width="100%" height="auto" style={{ marginTop: 20 }} />}
      <Row className={columnClassName}>
        {column?.map((item: any) => {
          return <Col span={item?.span}>{item?.title}</Col>;
        })}
      </Row>
      <div
        style={{
          height: height,
          overflow: speed ? 'hidden' : 'auto',
        }}
        id="container"
      >
        <div
          ref={ref1}
          style={{ transform: `translateY(-${childTran}px)` }}
          onMouseOver={() => {
            clearInterval(a);
          }}
          onMouseLeave={() => {
            autoScroll();
          }}
          id="activeData"
        >
          {data?.map((item: any, index: number) => {
            return (
              <Row className={dataClassName}>
                {column?.map((it: any) => {
                  return (
                    <Col span={it.span}>
                      {it?.render
                        ? it?.render(item, item[it.dataIndex], index)
                        : item[it.dataIndex]}
                    </Col>
                  );
                })}
                <div
                  style={{
                    width: '100%',
                    height: 1,
                    border: dividerColor,
                  }}
                />
              </Row>
            );
          })}
          {speed && <div ref={ref2}></div>}
        </div>
      </div>
    </div>
  );
};

export default CustomTable;

// 示例
<CustomTable
  column={column}
  dataSource={data}
  dataClassName={S.tableData}
  columnClassName={S.TableColumn}
  dividerColor="transparent"
  height="192px"
  speed={50}
/>