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;
相关推荐
程序员小续2 分钟前
React 官方严令禁止:Hook 不能写在 if/else,真相竟然是…
前端·javascript·程序员
懒得不想起名字2 分钟前
flutter_riverpod: ^2.6.1 应用笔记
前端
CrabXin2 分钟前
让网页在 PC 缩放时“纹丝不动”的 4 个技巧
前端·react.js
Juchecar13 分钟前
Naive UI 学习指南 - Vue3 初学者完全教程
前端·vue.js
用户81686947472514 分钟前
从0到1教你开发一个Mini-ESLint
前端·开源
coding随想14 分钟前
JavaScript中的DOM事件对象Event全解析
前端
专研狂14 分钟前
React 的闭包陷阱 + 状态异步更新机制
前端
zabr19 分钟前
AI黑箱解密:开发者必须了解的AI内部机制真相,原来我们一直被忽悠了
前端·aigc·ai编程
Sokach38631 分钟前
vue3引入tailwindcss 4.1
前端·css
小奋斗40 分钟前
深入浅出:JavaScript中 三大异步编程方案以及应用
javascript·面试