Vue3 + el-table下拉分页

### Vue3 Element Plus `el-table` 组件实现下拉分页功能 为了在 Vue3 和 Element Plus 中实现带有下拉分页功能的表格，可以通过组合使用 `el-select` 或者 `el-dropdown` 来创建自定义分页控件。下面是一个完整的示例来说明如何实现这一需求。 #### 安装依赖库 首先确保已经安装了必要的包： ```bash npm install element-plus vue-i18n axios --save ``` #### 创建组件并引入所需模块 ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; const app = createApp(App); app.use(ElementPlus).mount('#app'); ``` #### 编写页面逻辑与模板结构 ```html <template> <div class="table-container"> <!-- 表格部分 --> <el-table :data="paginatedData" style="width: 100%"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> <!-- 自定义分页器 --> <div class="pagination-wrapper"> <span>每页显示：</span> <el-select v-model="pageSize" @change="handlePageSizeChange"> <el-option value="5">5</el-option> <el-option value="10">10</el-option> <el-option value="20">20</el-option> </el-select> <el-dropdown trigger="click" @command="handleChangePage"> <span class="dropdown-link">{{ currentPage }} / {{ totalPages }}</span> <template #dropdown> <el-dropdown-menu> <el-dropdown-item v-for="(page, index) in pageOptions" :key="index" :command="page" > 跳转到第{{ page }}页 </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </div> </template> <script setup> import { ref, computed, watchEffect } from 'vue'; let tableData = [ /* 假设这里有一系列的数据 */ ]; const pageSize = ref(10); // 默认每页条目数 const currentPage = ref(1); function handlePageSizeChange() { currentPage.value = 1; // 改变每页数量时重置当前页码为首页 } watchEffect(() => { console.log(`Current Page Size is ${pageSize.value}`); }); const paginatedData = computed(() => { const startIdx = (currentPage.value - 1) * parseInt(pageSize.value); return tableData.slice(startIdx, startIdx + parseInt(pageSize.value)); }); const totalPages = computed(() => Math.ceil(tableData.length / parseInt(pageSize.value))); const handleChangePage = (newPage) => { if (newPage >= 1 && newPage <= totalPages.value) { currentPage.value = newPage; } }; const pageOptions = computed(() => Array.from({ length: totalPages.value }, (_, i) => i + 1)); </script> <style scoped> .pagination-wrapper { margin-top: 20px; } .dropdown-link { cursor: pointer; } </style> ``` 此代码片段展示了如何通过监听 `pageSize` 的变化来自适应调整每一页所展示的内容，并利用 `el-dropdown` 提供了一个简洁的方式来让用户快速跳转至指定页面[^1]。