vxe-table 滚动触底加载

### 使用 `vxe-table` 实现滚动触底分页加载 为了实现当用户滚动到表格底部时自动加载更多数据的功能，可以采用无限加载配合虚拟滚动的方式。这种方式可以让用户感觉不到分页的存在，而实际上是在每次接近页面底部时触发新的数据加载请求[^1]。 #### 初始化项目依赖 安装最新的 `vxe-pc-ui` 和 `vxe-table` 版本： ```bash npm install [email protected] [email protected] ``` 引入必要的模块并注册全局组件： ```javascript import { createApp } from 'vue'; import App from './App.vue'; // 导入VXE Table UI库及其样式文件 import VxeUI from 'vxe-pc-ui' import 'vxe-pc-ui/lib/style.css' createApp(App).use(VxeUI).mount('#app') ``` #### 配置 `vxe-table` 组件支持无限滚动加载 在 Vue 组件内部配置 `vxe-table` 来启用此特性： ```html <template> <div style="height: 500px;"> <!-- 设置高度是为了让表格能够正常显示垂直滚动条 --> <vxe-grid ref="xGrid" :columns="tableColumn" :data="tableData" height="auto" border resizable show-overflow @scroll-bottom="loadMore"> </vxe-grid> </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue'; const tableColumn = [ { field: 'name', title: 'Name' }, { field: 'age', title: 'Age' } ]; let currentPage = 1; const pageSize = 20; const tableData = ref([]); async function fetchData(page) { // 这里模拟异步获取数据的过程 const response = await fetch(`/api/data?page=${page}&size=${pageSize}`); return await response.json(); } function loadMore() { currentPage++; fetchData(currentPage).then(data => { data.forEach(item => tableData.value.push(item)); }); } onMounted(() => { fetchData(currentPage); }); </script> ``` 上述代码展示了如何设置一个具有固定高度的容器包裹住 `vxe-grid` 表格，并监听其 `scroll-bottom` 事件，在检测到滚动到底部时调用 `loadMore()` 方法来追加新一批的数据项至现有列表中。 #### 关键点解释 - **虚拟滚动**：通过仅渲染当前视窗内的行数提高性能表现。 - **懒加载机制**：只有当用户即将查看某一部分内容之前才会真正发起对该部分内容对应的网络请求或者计算操作。 - **用户体验优化**：保持平滑流畅的操作体验的同时减少不必要的资源消耗。