antd|antd Table 上拉加载更多数据
背景
table不分页 然而数据又很多，所以数据需要做分页加载
查找antd 没找到上下拉加载对应的API
故自己实现
原来的实现方式：
在table外加一层div 监听table与div的位置变化来控制数据加载
但这样实现会在table滑动的时候 表头页滑上去了
下面为优化后的实现：
代码
import React, { Component } from "react";
import { Table } from "antd";
let lastScrollTop = 0;
class KKTable extends Component {
constructor(props) {
super(props);
this.state = {};
}componentDidMount() {
const count = document.getElementsByClassName('ant-table-body').length
for (let index = 0;
index < count;
index++) {
// 给当前页面内的每个table添加滑动监听事件
document.getElementsByClassName('ant-table-body')[index].addEventListener('scroll', this.onScrollEvent);
}
}componentWillUnmount() { }onScrollEvent = e => {
// console.log(e.path[6].className);
//通过这个获取对应的table
const loadHeight = 150;
if (e.target.scrollTop + e.target.clientHeight > e.target.scrollHeight - loadHeight) {
// 这里去做你的异步数据加载
const pullDown = e.target.scrollTop - lastScrollTop > 0
const { loadMore } = this.props;
if (loadMore && pullDown) {
loadMore(e.target.scrollTop, e.target.clientHeight, e.target.scrollHeight);
}
}
lastScrollTop = e.target.scrollTop
}render() {
const { loadMore, ...config } = this.props;
return (
);
}
}export default KKTable;
调用
record[rowKey]} id={key} dataSource={dataSource} columns={columns} pagination={pagination} scroll={{ y: scroll_y, x: info.scroll_x }} loading={loading} bordered small /> loadMore = () => {
console.log('上拉加载更多');
const { childKey } = this.state;
this.fetchData(childKey);
}
【antd|antd Table 上拉加载更多数据】支持同一页面内多个表格
以上为本人的开发笔记，如有问题或其他实现方式请留言交流。
谢谢！
推荐阅读
- Y房东的后半生14
- 陇上秋二|陇上秋二 罗敷媚
- MediaRecorder前后摄像头同时录像
- live|live to inspire 一个普通上班族的流水账0723
- 上班后阅读开始变成一件奢侈的事
- 危险也是机会
- “精神病患者”的角度问题
- 基于|基于 antd 风格的 element-table + pagination 的二次封装
- 亲子日记第186篇，2018、7、26、星期四、晴
- 海院（实干是海院风景（上））