antd 的table 实现 上拉加载

react 项目中用antd 的table 实现 上拉加载的效果

给 table 一个最大高度  

scroll={{ y: 560 }}

 

调用接口中 判断, 如果是第一页 =>直接赋值, 不是=> 拼接数组

 

获取 table 的body 添加滚动事件

 

document.getElementsByClassName('ant-table-body')[0].addEventListener('scroll', onScrollEvent);

 

在滚动事件中判断 是否是 最后一页

为避免 异步 接口 多次调用 , 给了一个 loading判断 

 

html 代码

        <Table
          size="small"
          scroll={{ y: 560 }}
          className={'tableBox'}
          columns={columns}
          dataSource={state.list}
          pagination={false}
          rowKey="id"
        />

 

ts 代码

  let lastScrollTop = 0;
  let pages = 0;
  let pageNum = 1;
  let loading = false;

  useEffect(() => {
    search();
    let list = [],
      obj = {
        id: '姓名',
        id2: '工号',
        id1: '联系电话',
        aa: '邮箱',
        ww: '职务',
      };
    for (const k in obj) {
      list.push({
        title: obj[k],
        key: k,
        dataIndex: k,
        align: 'center',
        ellipsis: true,
      });
    }
    setColumns(list);
    document.getElementsByClassName('ant-table-body')[0].addEventListener('scroll', onScrollEvent);
    return () => {};
  }, []);

  const onScrollEvent = (e) => {
    if (loading) {
      return;
    }
    if (
      e.target.scrollTop + e.target.clientHeight >
      e.target.scrollHeight - 50
    ) {
      // 这里去做异步数据加载
      const pullDown = e.target.scrollTop - lastScrollTop > 0;
      console.log(e.target.scrollTop, lastScrollTop, pullDown);
      if (pullDown && pageNum < pages) {
        loading = true;
        pageNum++;
        dispatchers.getList({ pageNum }).then(() => (loading = false));
      }
    }
    lastScrollTop = e.target.scrollTop;
  };


  const search = () => {
    pageNum = 1;
    lastScrollTop = 0;
    dispatchers.getList({ pageNum }).then((res) => {
      pages = res?.pages || 0;
    });
  };

    // 获取列表 api
    async getList(payload, state) {
      const params = { ...payload, pageSize: 20 };
      const res = await service.getList(params);
      if (res.code === 200) {
        let arr = [];
        if (payload.pageNum === 1) {
          arr = res.data.list;
        } else {
          arr = [...state.example.list, ...res.data.list];
        }
        dispatch.example.update({ list: arr });
        return res.data;
      }

 

其中 onScrollEvent 事件中 需要的变量   pages 等 不能用 useState 或 state 定义, onScrollEvent  事件中获取不到他们的改变

 

 

 

可能还可以用 antd table 的 react-window(虚拟列表)来实现 , 不过上述方法已经解决了我的需求