react 中ant design table 表格组件滚动条监听方法

最新推荐文章于 2025-06-06 11:14:04 发布

山里的猿人

最新推荐文章于 2025-06-06 11:14:04 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： ant design 问题文章标签： react javascript 前端 reactjs react.js

本文链接：https://blog.youkuaiyun.com/Mrluog/article/details/121837804

本文介绍了在React中使用Ant Design Table组件监听滚动条的方法，特别强调了在Class组件中的实现，包括绑定ref以获取表格元素，并应用防抖函数以优化性能。文章还提及了滚动条监听涉及的技术，如防抖、节流、闭包以及onScrollCapture事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react 中ant design table 表格组件滚动条监听方法

1、包的版本提示## 标题

 "react": "^16.8.6"
  "react-dom": "^16.8.6"
  "antd": "^3.19.5"

2、先上代码

import React, { PureComponent } from 'react';
import ReactDOM from 'react-dom';
import { Table } from 'antd';
import { debounce } from '@/utils/tools';

class BranchCompanyPage extends PureComponent {
      onScrollHandle = () => {
        const table = ReactDOM.findDOMNode(this.table);
        // 获取表格dom元素
        const tableBody = table.querySelector('.ant-table-body');
        // 容器可视区高度
        const tableBodyHeight = tableBody.clientHeight;
        // 内容高度
        const contentHeight = tableBody.scrollHeight;
        // 距离顶部的高度
        const toTopHeight = tableBody.scrollTop;
        // 当距离底部只有0.5时，重新获取数据
        if (contentHeight - (toTopHeight + tableBodyHeight) < 0.5) {
           // 加载数据，