这一版在使用过程中会出现 一个页面引用多个该组件,获取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>
);
}