react中antd的table实现数据滚动，鼠标悬浮时停止滚动

在Antd的Table组件中，可以使用fixed属性来实现数据滚动。具体实现方法如下：

1. 首先，在Table的columns属性中设置width属性，保证表格总宽度大于外层容器的宽度，这样表格就可以出现横向滚动条。

2. 然后，在Table的scroll属性中设置x属性，指定表格横向滚动的范围。

3. 最后，在Table的scroll属性中设置onScroll属性，当表格滚动时，调用一个函数来实现滚动的暂停和继续。在该函数中，通过判断鼠标是否悬浮在表格上，来决定是否暂停滚动。

代码示例：

import React, { useState, useRef } from 'react';
import { Table } from 'antd';

const columns = [
  { title: '姓名', dataIndex: 'name', width: 200 },
  { title: '年龄', dataIndex: 'age', width: 200 },
  { title: '地址', dataIndex: 'address', width: 400 },
];

const data = [];
for (let i = 0; i < 50; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

const ScrollTable = () => {
  const [isScrolling, setIsScrolling] = useState(true);
  const tableRef = useRef(null);

  const handleScroll = () => {
    if (!tableRef.current) return;
    const table = tableRef.current.querySelector('.ant-table-body');
    if (!table) return;
    if (isScrolling && table.scrollLeft !== 0) {
      setIsScrolling(false);
    } else if (!isScrolling && table.scrollLeft === 0) {
      setIsScrolling(true);
    }
  };

  const handleMouseEnter = () => {
    setIsScrolling(false);
  };

  const handleMouseLeave = () => {
    setIsScrolling(true);
  };

  return (
    <div style={{ width: 800, height: 400, overflow: 'hidden' }}>
      <Table
        columns={columns}
        dataSource={data}
        pagination={false}
        scroll={{ x: 800 }}
        ref={tableRef}
        onScroll={handleScroll}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        style={{ width: 1000 }}
        bordered
        size="small"
        rowKey={(record) => record.key}
        sticky
      />
    </div>
  );
};

export default ScrollTable;

在上面的代码中，我们通过ref获取到了Table组件的DOM节点，然后在handleScroll方法中判断表格是否滚动，根据isScrolling状态来判断是否暂停滚动。同时，我们还通过onMouseEnter和onMouseLeave事件来监听鼠标是否悬浮在表格上，以此来控制滚动的暂停和继续。