React,antd实现自动滚动Table封装组件

这一版在使用过程中会出现 一个页面引用多个该组件,获取dom出错的问题,加强版自滚动table已上传 点击跳转加强版自滚动组件

只是根据工作需要,简单写了这种方

如有不妥, 你就当看不见…

如有好的建议,私我/评论即可

.MD

参数名称  ｜  注释                ｜  默认值
rollNum  ｜ 超过多少条开始自动滚动  ｜   10
rollTop  ｜ 滚动速度              ｜  1.5
rollTime ｜ 滚动时间              ｜  100ms
scroll   ｜ 表格大小              ｜ y:500px  x:100%
flag     |  是否滚动              ｜ true 滚动

必传
dataSource
columns

组件代码

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

export default function index(props) {
  const {
    dataSource,
    rollTime = 100,
    rollNum = 10,
    rollTop = 1.5,
    flag = true,
  } = props;
  const [timer, setTimer] = useState(); // 定时器

  useEffect(() => {
    InitialScroll(dataSource);
    return () => {
      clearInterval(timer);
    };
  }, []); // 检测数组内变量 如果为空 则监控全局
  // 开启定时器
  const InitialScroll = (data) => {
    let v = document.getElementsByClassName('ant-table-body')[0];
    if (data.length > Number(rollNum) && flag) {
      // 只有当大于10条数据的时候 才会看起滚动
      let time = setInterval(() => {
        v.scrollTop += Number(rollTop);
        if (
          Math.ceil(v.scrollTop) >= parseFloat(v.scrollHeight - v.clientHeight)
        ) {
          v.scrollTop = 0;
          // setTimeout(() => { v.scrollTop = 0 }, 1000)
        }
      }, Number(rollTime));
      setTimer(time); // 定时器保存变量 利于停止
    }
  };
  return (
    <div
      onMouseOver={() => {
        clearInterval(timer);
      }}
      onMouseOut={() => {
        InitialScroll(dataSource);
      }}
    >
      <Table
        pagination={false}
        scroll={{
          y: 500,
          x: '100%',
          scrollToFirstRowOnChange: true,
        }}
        {...props}
      />
    </div>
  );
}