ag-grid-vue 滚动条触底加载更多

`ag-Grid-Vue` 是一个基于 Vue.js 的 `ag-Grid` 的封装组件，它是 `ag-Grid`（一个功能强大的数据表格和网格组件库）在 Vue 框架中的实现。滚动条触底加载更多（Infinite Scroll or Virtual Scrolling）是 ag-Grid 提供的一种功能，用于在用户滚动到表格底部时自动加载更多行，而不是一次性加载所有数据，从而提高性能和用户体验。

在 ag-Grid-Vue 中实现滚动条触底加载更多的步骤通常包括：

1. 配置列：在 ag-Grid 的列定义中启用 `infiniteScroll` 属性，并设置 `scrollThreshold` 参数，指定当滚动到底部多少距离时触发加载。例如：

   <ag-grid-vue :columnDefs="columnDefs" :infiniteScroll="true" scrollThreshold="100"></ag-grid-vue>

这里 `100` 表示当滚动条距离底部小于100px时开始加载更多数据。

2. 数据分页：你需要确保数据源是分页的，可以使用 ag-Grid 的 `gridApi.getRowNode` 方法获取当前可视区域的行号范围，然后从后向前逐页加载。

3. 加载事件处理：在 Vue 组件中监听 `onGridReady` 或其他适当的事件，当滚动到底部时触发加载更多数据的请求，并更新数据源。示例：

   mounted() {
     this.gridApi.addEventListener('scroll', this.handleScroll);
   },
   methods: {
     handleScroll(params) {
       if (params.isEnd && params.isLastRenderedPage) {
         // 加载更多数据
         this.loadMoreData();
       }
     },
     loadMoreData() {
       // 假设你有一个接口 `loadNextPage` 用于请求更多数据
       this.loadNextPage().then(() => {
         // 更新行数，告诉 ag-Grid 加载完成
         this.gridApi.sizeColumnsToFit();
       });
     }
   }

4. 更新视图：加载新数据后，你需要将其添加到现有数据的末尾，并调用 `gridApi.sizeColumnsToFit()` 来调整列宽以适应新的内容。