前情提要
上一个版本出现了一些问题,当一个页面同时引用多个自滚动表格的时候会出现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 }} />
</>
);
};