可视化滚动表格

基于antd中Table组件进行二次封装，其中css变量–height高度-55的原因是antd默认表格大小的行高是55，行高可自行基于antd的size重新计算减去的高度

import React, { useEffect } from "react";
import { Table } from "antd";
import "./index.css";

export default function AutoScrollTable(props) {
  const { height = 500, ...ohter } = props;
  const { dataSource = [] } = ohter || {};

  const mouseHandle = (e) => {
    e.target.style.animationPlayState = "paused";
  };
  const leaveHandle = (e) => {
    e.target.style.animationPlayState = "running";
  };

  useEffect(() => {
    const tableBody = document.querySelector(".ant-table-body");
    tableBody.addEventListener("mouseenter", mouseHandle);
    tableBody.addEventListener("mouseleave", leaveHandle);

    return () => {
      tableBody.removeEventListener("mouseenter", mouseHandle);
      tableBody.removeEventListener("mouseleave", leaveHandle);
    };
  }, []);

  return (
    <div
      className="autoScrollTable"
      style={{ height: height, overflow: "hidden" }}
    >
      <Table
        style={{
          "--height": `${height - 55}px`,
          "--over": `${Math.floor((dataSource?.length * 600) / 1000)}s`,
        }}
        {...ohter}
        pagination={false}
        scroll={{ y: "100%" }}
      />
    </div>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(-100% + var(--height)));
  }
  100% {
    transform: translateY(0);
  }
}

.autoScrollTable .ant-table-body {
  animation: scroll var(--over) linear infinite;
}

.autoScrollTable .ant-table-thead {
  position: sticky;
  z-index: 999;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20