antd表格默认滚动数据,鼠标悬浮停止滚动且可以通过滚轮浏览数据实现代码

下面是一个简单的实现示例：

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

const dataSource = []; // 表格数据源

// 生成一些模拟数据
for (let i = 0; i < 100; i++) {
  dataSource.push({
    key: i.toString(),
    name: `User ${i}`,
    age: Math.floor(Math.random() * 30) + 20,
    address: `New York No. ${i + 1} Lake Park`,
  });
}

const ScrollTable = () => {
  const [scrollY, setScrollY] = useState(400); // 表格的纵向滚动高度

  // 鼠标悬停事件处理函数
  const handleMouseEnter = () => {
    setScrollY('none'); // 停止滚动
  };

  // 鼠标离开事件处理函数
  const handleMouseLeave = () => {
    setScrollY(400); // 恢复滚动
  };

  // 滚轮事件处理函数
  const handleWheel = (e) => {
    const { deltaY } = e; // 滚动方向，正数表示向下滚动，负数表示向上滚动
    const tableNode = e.currentTarget.querySelector('.ant-table-body');

    // 计算表格当前滚动位置和可滚动距离
    const scrollTop = tableNode.scrollTop;
    const scrollHeight = tableNode.scrollHeight - tableNode.clientHeight;

    // 根据滚动方向和表格当前滚动位置来计算新的滚动位置
    let newScrollTop = scrollTop + deltaY * 20;
    if (newScrollTop < 0) {
      newScrollTop = 0;
    }
    if (newScrollTop > scrollHeight) {
      newScrollTop = scrollHeight;
    }

    // 设置表格的新的滚动位置
    tableNode.scrollTop = newScrollTop;
  };

  const columns = [ // 表格列配置
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ];

  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      scroll={{ y: scrollY }} // 设置表格的纵向滚动高度
      onMouseEnter={handleMouseEnter} // 监听鼠标悬停事件
      onMouseLeave={handleMouseLeave} // 监听鼠标离开事件
      onWheel={handleWheel} // 监听鼠标滚轮事件
    />
  );
};

export default ScrollTable;

在这个示例中，我们使用了`useState`钩子来定义表格的纵向滚动高度，并在鼠标悬停和离开事件处理函数中修改了这个高度，从而实现了停止和恢复滚动的效果。同时，我们使用了`onWheel`事件来监听鼠标滚轮事件，并根据滚轮的滚动方向来修改表格的滚动位置，从而实现了通过滚轮浏览数据的效果。