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;
相关推荐
newxtc5 分钟前
【JJ斗地主-注册安全分析报告】
开发语言·javascript·人工智能·安全
烛阴33 分钟前
告别原生Cookie:js-cookie如何实现Cookie的优雅管理
前端·javascript
Allen Bright34 分钟前
【HTML-16】深入理解HTML中的块元素与行内元素
前端·html
前端卧龙人40 分钟前
受够了webpack的速度,我选择了vite重构vue2项目
前端
巛、1 小时前
ES6面试题
前端·面试·es6
周全全1 小时前
基于 Vue 和 Spring Boot 实现滑块验证码的机器验证
前端·vue.js·spring boot
汪子熙1 小时前
走进 Fundamental NGX Platform:从 SAP 设计体系到高生产力组件层
前端·javascript·面试
拉不动的猪2 小时前
单点登录全流程小姐
前端·javascript·面试
菜鸟小九2 小时前
html、css(javaweb第一天)
前端·css·html
y东施效颦2 小时前
uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
前端·javascript·vue.js·uni-app·vue