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()` 方法来追加新一批的数据项至现有列表中。 #### 关键点解释 - **虚拟滚动**：通过仅渲染当前视窗内的行数提高性能表现。 - **懒加载机制**：只有当用户即将查看某一部分内容之前才会真正发起对该部分内容对应的网络请求或者计算操作。 - **用户体验优化**：保持平滑流畅的操作体验的同时减少不必要的资源消耗。

### vxe-table 表格懒加载实现与配置方法 `vxe-table` 是一款功能强大的 Vue 表格组件库，提供了丰富的特性来满足复杂的业务需求。其中，“懒加载”是一种优化性能的技术手段，在处理大量数据时尤其重要。以下是关于 `vxe-table` 中如何实现和配置懒加载的具体说明： #### 1. **基本概念** 懒加载的核心思想是在需要的时候才去请求并展示数据，而不是一次性加载全部数据到内存中。对于表格而言，这意味着只加载当前可视范围内的数据，当用户滚动或切换分页时再动态加载更多数据。 #### 2. **实现方式** `vxe-table` 提供了两种主要的方式用于实现懒加载： - 使用虚拟滚动（Virtual Scroll）。 - 结合分页器手动控制数据加载逻辑。 ##### (1) 虚拟滚动 通过启用虚拟滚动模式，可以显著提升大数据量场景下的性能表现。此模式下，只有视口中的行会被渲染，其余部分则被延迟加载。 ```javascript // 启用虚拟滚动的示例代码 <template> <vxe-grid :columns="tableColumns" :data="tableData" height="auto"> <!-- 配置项 --> <template #empty>暂无数据</template> </vxe-grid> </template> <script> export default { data() { return { tableColumns: [ { field: 'name', title: '名称' }, { field: 'age', title: '年龄' } ], tableData: [] // 动态获取的数据列表 }; }, created() { this.loadTableData(); }, methods: { loadTableData() { const mockApi = () => new Promise(resolve => setTimeout(() => resolve(Array.from({ length: 1000 }, (_, i) => ({ name: `Item ${i}`, age: Math.floor(Math.random() * 50) }))), 500)); mockApi().then(data => { this.tableData = data; }); } } }; </script> ``` 注意：为了开启虚拟滚动，需设置表格的高度属性为固定值或者百分比形式[^1]。 ##### (2) 手动分页加载 如果不想依赖于虚拟滚动机制，则可以通过绑定事件监听用户的交互行为（如翻页），从而触发后台接口调用来拉取对应页面的数据片段。 ```html <!-- 绑定远程服务端分页 --> <vxe-pager :current-page.sync="currentPage" :page-size.sync="pageSize" :total="totalPageCount" @page-change="handlePageChange"> </vxe-pager> ``` ```javascript methods: { handlePageChange({ currentPage, pageSize }) { console.log(`正在加载第${currentPage}页`); fetch(`/api/data?page=${currentPage}&size=${pageSize}`) .then(response => response.json()) .then(result => { this.tableData = result.items; // 更新本地状态变量 this.totalPageCount = result.totalPages; // 总共多少页数 }) .catch(error => alert('发生错误')); } } ``` 以上两段代码展示了如何分别利用虚拟滚动以及传统意义上的服务器端分页技术达成懒加载效果[^1]。 #### 3. **注意事项** - 如果采用的是虚拟滚动方案，请务必确认浏览器兼容性和实际项目环境是否允许使用该特性。 - 对于网络请求频率较高的情况，建议加入防抖节流措施以减少不必要的 API 调用次数。 - 数据源结构应保持一致性以便前端能够正确解析返回的结果集。 --- ###