a-table使用下拉滚动加载事件，VUE3andREACT框架 jsx语法

a-table没有支持下路滚动加载，本人不才，只能在外面在套一层div监听滚动 注意1：table去掉滚动高度属性 即scroll={{ y: 500 }} 注意2：这种滚动会让整个table列表滚动，也就是头部标题会滚到最上面

vue-jsx语法
        <div 
          onScrollCapture={onScrollCapture}
          style={{ height:'200px', overflowY: 'scroll' }}
          ref={scrollRef}
        >
          <ATable
            bordered
            loading={pageState.modalRecall.loading}
            dataSource={pageState.modalRecall.dataSource}
            columns={pageState.modalRecall.columns}
            pagination={pageState.modalRecall.pagination}
            onChange={handleTableChangeModalRecall}
            v-slots={{
              bodyCell: ({ column, text, record }) => {
                if (column.key === 'title') {
                  return (
                    <>
                      <a href={record.url} target="_blank">
                        {text}
                      </a>
                    </>
                  )
                } 
              },
            }}
          ></ATable>
         </div>
         
         js
         
         const onScrollCapture = (e) => {
              console.log(e,e.target.scrollTop,e.target.clientHeight,e.target.scrollHeight,)
              // scrollTop会有小数点导致等式不成立，解决方案：四舍五入
              if (
                Math.round(e.target.scrollTop) + e.target.clientHeight == e.target.scrollHeight
              ) {
                if (Math.ceil(total / rows) == page) {
                //这里写已经加载全部的数据交互
                  return false;
                }
               //这里写已经每次页面+1的交互
              }
            }
         
         data
         
         const pageState = reactive({
          modalRecall: {
            loading: false,
            dataSource: [],
            columns: [
              {
                title: '标题',
                dataIndex: 'title',
                key: 'title',
              },

            ],
            pagination: {
              total: 0,
              pageSize: 10,
              current: 1,
              hideOnSinglePage: false,
              showQuickJumper: true,
              showSizeChanger: true,
              showTotal: (total) => {
                return `共${total}条`
              },
              pageSizeOptions: ['5','10', '20'],
            },
          },

以上是vue+jsx语法 react语法借鉴链接：juejin.cn/post/700092…