antd的Table触底加载

思路

• 用div把Table包起来
• Table添加属性scroll={{y: 200, x: 'max-content'}}，使其可以滚动
• 给包裹用的div打上ref印记
• 在div上监听滚动onScrollCapture

<div
    ref={scrollElement}
    onScrollCapture={onScrollEvent}
>
    <Table
      columns={[...TableColumns, {
        title: '操作',
        render: (text, record) => tableHandle(text, record)
      }]}
      dataSource={tempData}
      rowKey={({id}) => id}
      bordered
      pagination={false}
      scroll={{y: 200, x: 'max-content'}}
      loading={tableLoading}
    />
</div>

const scrollElement = useRef(null);
const onScrollEvent = (event) => {
    if (event.target.scrollTop === (event.target.scrollHeight - event.target.clientHeight)) {
      setTableLoading(true);
      // setTempData([])
      // 在这里请求数据
      setTimeout(() => {
        setTableLoading(false);
      }, 100);
    }
  }