目录

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;
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
用户114818678948411 分钟前
大文件下载、断点续传功能
前端·nestjs
顾林海12 分钟前
Flutter 文本组件深度剖析:从基础到高级应用
android·前端·flutter
夜宵饽饽13 分钟前
传输层-MCP的搭建(一)
javascript·后端
eason_fan13 分钟前
在 Windows 环境下使用 Linux 命令行:Cygwin 的安装与配置
前端·命令行
HHW13 分钟前
NVM:node版本管理工具
前端
阿炸14 分钟前
Promise及其API源码的实现思考过程
前端·javascript
酒茶白开水23 分钟前
React十案例下
前端·react.js·前端框架
刘_小_二1 小时前
Nginx设置开机自启动(Linux版本)
前端
小鱼计算机1 小时前
【6】深入学习http模块(万字)-Nodejs开发入门
前端·javascript·http·node.js·http请求
再玩一会儿看代码1 小时前
彻底掌握 XMLHttpRequest(XHR):前端通信的基石
前端·经验分享·笔记·学习·xhr