前端table自动轮播功能（js/ts+react+antd）

最近接到一个需求，需要把表格内容自动轮播。antd的组件table并没有提供轮播api（虽然有人提过意见，让他们加上，但他们的回复是自行封装。

那就只能自己做了。

首先，轮播，搞两个ref，用来获取高度，滑动位置，设置轮播时间。

const TableContainer = useRef<any>();
const timerRef = useRef<number>();

然后给table绑上ref，记得给table设置overflow。

         <Table
            id={'table'}
            ref={TableContainer}
            columns={columns}
            dataSource={data}
            pagination={false}
            scroll={{
              y: 230,
              x: '100%',
              scrollToFirstRowOnChange: true,
            }}
            style={{ overflow: 'scroll' }}
          />

写一个initialScroll方法。

const initialScroll = (data: any) => {
    let container = TableContainer.current;
    container = document
      .getElementById('table')
      ?.getElementsByTagName('div')[0]
      ?.getElementsByTagName('div')[1];
    if (data.length > 5) {
      timerRef.current = window.setInterval(() => {
        container.scrollTo({
          top: container.scrollTop + Number(46),
          behavior: 'smooth',
        });
        if (
          Math.ceil(container.scrollTop) >=
          Number(container.scrollHeight - container.clientHeight)
        ) {
          container.scrollTop = 0;
        }
      }, 2000);
    }
  };

useEffect出发轮询。

  useEffect(() => {
    if (data.length > 0) {
      initialScroll(data);
    }
    return () => {
      window.clearInterval(timerRef.current);
    };
  }, [data]);

当鼠标在table上时停止轮播。

          onMouseOver={() => {
            window.clearInterval(timerRef.current);
          }}
          onMouseOut={() => {
            initialScroll(trend);
          }}