react+antd+table实现表格数据，从头到尾循环、自动分页、滚动展示

最新推荐文章于 2024-04-26 11:47:29 发布

多乐_π

最新推荐文章于 2024-04-26 11:47:29 发布

阅读量984

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45481456/article/details/132322806

版权

// ts写法
// 分页是20，滚动过程中自动分页调接口返回数据

class Demo extends React.Component<ThemeColorState & UserState, State> {
  /** 定时器 */
  timer: any = null;
  /** 滚动的dom */
  scrollDom: any = null;
  state: State = {
    scrollTop: 0,
    pagination: {
      total: 0,
      current: 1,
      pageSize: 20,
      size: "small",
      pageSizeOptions: ["10", "15", "30", "45"],
      defaultCurrent: 1,
    },
    dataSource: {
      total: 0,
      totalArea: 0,
      rows: [],
    },
  };
};

componentDidMount(): void {
    this.loadDetailsApproval();
  }
  componentWillUnmount() {
    if (this.timer) {
      clearInterval(this.timer);
      cancelAnimationFrame(this.timer);
    }
  }
  /** 查询审批情况详情 */
  loadDetailsApproval = async () => {
    const { pagination, search, tbaleOrder, tableField, currentTFarmLandId } = this.state;
    const totalPage = Math.ceil(pagination.total / pagination.pageSize);
    if (pagination.current > totalPage && pagination.current !== 1) {
      return;
    }
    const data = await TLandsProvider.getITableData({
        pageNum: pagination.current, pageSize: pagination.pageSize, orderByColumn: tableField,
        isAsc: tbaleOrder, name: search, farmLandId: currentTFarmLandId,
      }).catch(err => { message.error("审批情况获取失败！"); return null; });
    if (data && data.total > 0) {
      const rows = [...this.state.dataSource.rows, ...data.rows];
      const newRecords = rows.map((item: any, index: number) => ({
        ...item,
        key: index + 1,
      }));
      this.setState({
        dataSource: { ...data, rows: newRecords },
        pagination: { ...pagination, total: data.total },
      }, () => {
        if (pagination.current === 1) {
          this.timer = requestAnimationFrame(this.initialScroll);
        }
      });
    } else {
      if (this.timer) {
        cancelAnimationFrame(this.timer);
      }
    }
  }
  /** 分页变化触发事件 */
  paginationChange = (page: number) => {
    this.setState(
      {
        pagination: {
          ...this.state.pagination,
          current: page,
        },
      }, this.loadDetailsApproval,
    );
  }

  /** 滚动 */
  initialScroll = () => {
    const { pagination, scrollTop } = this.state;
    const { current } = this.state.pagination;
    const dom = document.getElementsByClassName("ant-table-body")[0];
    const totalPage = Math.ceil(pagination.total / pagination.pageSize);

    dom.scrollTop += 1;
    // console.log("dddddd", Math.floor(dom.scrollTop) + dom.clientHeight, dom.scrollHeight);
    // 在滚动到离底部10像素的地方，翻页加载
   
    if (Math.floor(dom.scrollTop) + dom.clientHeight >= dom.scrollHeight - 10 && Math.floor(dom.scrollTop) + dom.clientHeight <= dom.scrollHeight) {
      if (scrollTop === 0) {
        this.setState({
          scrollTop: dom.scrollTop,
        });
        if (pagination.current >= totalPage) {
          dom.scrollTop = 0;
          cancelAnimationFrame(this.timer);
          // this.paginationChange(1);
        } else {
          this.paginationChange(current + 1);
        }
      }
    } else {
      this.setState({
        scrollTop: 0,
      });
    }
    this.timer = requestAnimationFrame(this.initialScroll);
  }



render(){
         <div
           className="bottom-con"
           onMouseEnter={() => { if (this.timer) cancelAnimationFrame(this.timer); }}
           onMouseLeave={() => { if (this.timer) cancelAnimationFrame(this.timer); this.timer = requestAnimationFrame(this.initialScroll); }}
         >
              
           <Table
              columns={columns}
              dataSource={dataSource?.rows}
              pagination={false}
              scroll={{ y: "calc(100% - 50px)" }}
           />
              
         </div>
}