React+Antd 实现组滚动表格加强版

前情提要

上一个版本出现了一些问题,当一个页面同时引用多个自滚动表格的时候会出现dom获取错误,所以改用ref来精准获取dom元素.所以造出来这个加强版

组件源码

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

export default function index(props: any) {
  const { dataSource, rollTime = 100, rollNum = 10, rollTop = 1.5, flag = true } = props;
  const [timer, setTimer] = useState<number>(); // 定时器
  const TableContainer = useRef<any>();
  useEffect(() => {
    InitialScroll(dataSource);
    return () => {
      clearInterval(timer);
    };
  }, []); // 检测数组内变量 如果为空 则监控全局

  let container: any = React.createRef();

  // 开启定时器
  const InitialScroll = (data: any) => {
    let container = 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;
          // setTimeout(() => { container.scrollTop = 0 }, 1000)
        }
      }, Number(rollTime));
      setTimer(time); // 定时器保存变量 利于停止
    }
  };
  return (
    <div
      onMouseOver={() => {
        clearInterval(timer);
      }}
      onMouseOut={() => {
        InitialScroll(dataSource);
      }}
    >
      <Table
        ref={TableContainer}
        pagination={false}
        scroll={{
          y: 500,
          x: '100%',
          scrollToFirstRowOnChange: true,
        }}
        {...props}
      />
    </div>
  );
}

组件API

其余API详见ANTD官网-table antd

使用方法

引入后,直接传入dataSource ,columns 即可直接使用 还可看API传入特定参数以及antd官网table组件的API

import React from 'react';
import { ScrollTable } from '@yx-tools/cui';

export default () => {
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
    },
  ];

  const dataSource = [];

  for (let i = 0; i < 12; i++) {
    dataSource.push({
      key: i,
      name: `Edward King ${i}`,
      age: 32,
      address: `London, Park Lane no. ${i}`,
    });
  }

  return (
    <>
      <ScrollTable columns={columns} dataSource={dataSource} scroll={{ y: 200 }} />
    </>
  );
};