[react]大屏表格轮播

?需求：表格显示6条数据，默认2秒上翻一条。五秒获取一次新数据。

核心代码：

1.获取了一个名为TableContainer的引用，然后使用getElementById方法获取id为'table'的元素，并尝试获取该元素下的第一个div的第二个div。

2.判断data的长度是否大于6来决定是否执行后续操作。如果data长度大于6，则设置一个定时器timerRef，每2000毫秒执行一次回调函数

3.回调函数内部将容器元素向下滚动44个像素，并使用behavior属性设置平滑滚动的行为。

const initialScroll = (data: any) => {

? ? let container = TableContainer.current;

? ? container = document

? ? ? .getElementById('table')

? ? ? ?.getElementsByTagName('div')[0]

? ? ? ?.getElementsByTagName('div')[1];

? ? if (data.length > 6) {

? ? ? timerRef.current = window.setInterval(() => {

? ? ? ? container.scrollTo({

? ? ? ? ? top: container.scrollTop + Number(44),

? ? ? ? ? behavior: 'smooth',

? ? ? ? });

? ? ? ? if (

? ? ? ? ? Math.ceil(container.scrollTop) >= Number(container.scrollHeight - container.clientHeight)

? ? ? ? ) {

? ? ? ? ? container.scrollTop = 0;

? ? ? ? }

? ? ? }, 2000);

? ? }

? };

?4.在回调函数内还有一个判断条件，如果容器的scrollTop值等于容器的scrollHeight减去容器的clientHeight时，将scrollTop重置为0，实现了循环滚动的效果。

表格列的配置描述：

?const columns: any = [

? ? {

? ? ? title: '检测日期',

? ? ? dataIndex: 'checkTime',

? ? ? width: 105,

? ? ? ...styless,

? ? ? render(text: any, record: any, index: any) {

? ? ? ? return <span key={index}>{moment(text).format('MM-DD ?HH:mm:ss')}</span>;

? ? ? },

? ? },

? ? {

? ? ? title: '姓名',

? ? ? dataIndex: 'name',

? ? ? ...styless,

? ? ? // width: 60,

? ? ? render(text: any, record: any, index: any) {

? ? ? ? return <>{text?.replace(/.$/, '*')}</>;

? ? ? },

? ? },

? ? {

? ? ? title: '企业名称',

? ? ? dataIndex: 'companyName',

? ? ? hideInTable: true,

? ? ? ...styless,

? ? ? width: 165,

? ? },

? ? {

? ? ? title: '检测项目数',

? ? ? dataIndex: 'total',

? ? ? // width: 80,

? ? ? ...styless,

? ? },

? ? {

? ? ? title: '通过项目数',

? ? ? dataIndex: 'frequency',

? ? ? ...styless,

? ? ? // width: 80,

? ? ? render(text: any, record: any, index: any) {

? ? ? ? return (

? ? ? ? ? <span key={index} style={record.total != text ? { color: '#FFA959' } : {}}>

? ? ? ? ? ? {text}

? ? ? ? ? </span>

? ? ? ? );

? ? ? },

? ? },

? ];

html部分

<Table

? ? ? ? ? id={'table'}

? ? ? ? ? ref={TableContainer}

? ? ? ? ? rowClassName={'hover-row'}

? ? ? ? ? columns={columns}

? ? ? ? ? dataSource={formData}

? ? ? ? ? pagination={false}

? ? ? ? ? locale={{ emptyText: '暂无数据' }}

? ? ? ? ? scroll={{

? ? ? ? ? ? y: 280,

? ? ? ? ? ? x: '100%',

? ? ? ? ? ? scrollToFirstRowOnChange: true,

? ? ? ? ? }}

? ? ? ? ? className={style.table}

? ? ? ? ? style={{ overflowY: 'hidden' }}

? ? ? ? />

最后：

根据data的长度自动滚动TableContainer元素。当data长度大于6时，每2秒自动滚动一次，滚动距离为44个像素，达到底部时返回顶部。

效果图