react项目中ant-ui表格用下拉滚动条加载数据

实现需求：在react项目中，在满足表格头部列可以拖动改变的情况下，还要表格利用滚动条下拉来加载表格数据？

如下图：

**方案一：**利用react-infinite-scroll-component插件，但是表头无法固定，一旦样式固定定位写死，就无法满足拖动，如果你的表格列不需要拖动的话，可以使用，比较方便；

**方案二：**先实现ant-ui表格组件的滚动，然后监控表格滚动条，快到达底部后触发加载数据接口来实现下拉加载，比较麻烦，但是表头固定，也不会破坏表头列的拖动；

最后我选择了方案二，下面我就把方案二的大致步骤写一下;

第一步：先实现ant-ui表格的滚动条

下面代码是在实现了表格可以拖动表头来改变列的情况下，可以点击用react-resizable插件来拖动改变ant-ui表格的列宽查看，这里就不说了

根据table的api规则，直接设置scroll属性

代码 如下：

import ResizeableTable from "@app/utils/reactResizable/Resizeable"

class AccelerateAll extends Component{
	...
	render(){
	  const columns = [...]
	  const tableData= [...]
	  //为了初始化时，表格能填充屏幕展示，设置了动态高，(可视区域高度 - 已知固定高度)
	  const yscroll = document.body.clientHeight  - 120
	  return(
	     <div className="Accelerate-table"> 
              <ResizeableTable
                scroll={
   
   {  y:yscroll }} 
                columns={columns} //表头数据
                dataSource={tableData} //内容数据
              />
          </div>
	  )
	}
}

第二步：监控滚动条，在快到达底部时触发回调

在上面代码上我们继续操作，如下：

import ResizeableTable from "@app/utils/reactResizable/Resizeable"

class AccelerateAll extends Component{
	...
	
	//加载表格数据函数
	loadMoreData = （）=> {
	   ...
	   //这里做判断，如果 数据总数 >目前表格数据总数 时，下拉时触发表格数据接口函数
	   //数据总数 = 目前表格数据总数 时，不再调数据接口函数
	   if(total>tableData.length){ 
	      this.searchAcceleratorAll(value) //加载数据接口函数
	    }
	}
	
	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) {
	       // 加载数据， 其实这里还可以进行进一步的判断，判断页面是否允许发起请求，
	       // 如：数据已经是最后一页了，没有必要再发起请求
	       this.loadMoreData() //加载表格数据函数
	    }
	}
	
	render(){
	  const columns = [...]
	  const tableData= [...]
	  //为了初始化时，表格能填充屏幕展示，设置了动态高，(可视区域高度 - 已知固定高度)
	  const yscroll = document.body.clientHeight  - 120
	  return(
	      <div 
            className="Accelerate-table"  
            onScrollCapture={this.onScrollHandle} //在表格外部div上绑定滚动监控事件
            > 
              <ResizeableTable
                ref={(ref) => this.table = ref} //添加ref来操作dom,相当于id
                scroll={
   
   {  y:yscroll }} 
                columns={columns} //表头数据
                dataSource={tableData} //内容数据
              />
          </div>
	  )
	}
}