/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2024-10-17 09:10:18
|
* @LastEditTime: 2024-10-18 15:50:30
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 公共组件：表格滚动
|
*/
|
|
import React, { useEffect, useRef } from 'react';
|
import { Table } from 'antd';
|
|
/**
|
* 自动滚动表格组件
|
* @param {Object} props
|
* @param {Array} props.dataSource 表格数据源
|
* @param {Number} props.rollTime 表格每次滚动间隔时间 单位ms，默认100ms
|
* @param {Number} props.rollNum 表格超过指定条数开始滚动，默认10条
|
* @param {Number} props.rollTop 表格每次滚动的高度 单位px，默认2.5px
|
* @param {Boolean} props.flag 是否开启滚动，默认true
|
* @returns
|
*/
|
const ScrollTable = (props) => {
|
const {
|
dataSource,
|
columns,
|
rollTime = 100,
|
rollNum = 10,
|
rollTop = 2.5,
|
flag = true,
|
...restProps
|
} = props;
|
|
|
const tableContainer = useRef(null);
|
let timer = null;
|
|
const startScrolling = () => {
|
const container = tableContainer.current?.querySelector('.ant-table-body');
|
if (container && dataSource.length > rollNum && flag) {
|
timer = setInterval(() => {
|
container.scrollTop += rollTop;
|
if (container.scrollTop >= container.scrollHeight - container.clientHeight) {
|
container.scrollTop = 0;
|
}
|
}, rollTime);
|
}
|
};
|
|
useEffect(() => {
|
startScrolling();
|
}, [timer]);
|
|
const handleMouseOver = () => {
|
clearInterval(timer);
|
};
|
|
const handleMouseOut = () => {
|
startScrolling();
|
};
|
|
|
return (
|
<div
|
onMouseOver={handleMouseOver}
|
onMouseOut={handleMouseOut}
|
style={{ position: 'relative', width: '100%', height: '100%' }} // 确保
|
>
|
<Table
|
dataSource={dataSource}
|
columns={columns}
|
rowKey="id"
|
ref={tableContainer}
|
pagination={false}
|
scroll={{ y: 250, x: '100%', scrollToFirstRowOnChange: true }}
|
{...restProps}
|
/>
|
</div>
|
);
|
};
|
|
export default ScrollTable
|
