背景
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 (
<div>
<Table {...config} />
</div>
);
}
}
export default KKTable;
调用
<KKTable loadMore={this.loadMore} className={key} rowKey={record => 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);
}
支持同一页面内多个表格
以上为本人的开发笔记，如有问题或其他实现方式请留言交流。
谢谢！
