vue+el-table 列表 分页删除最后一页的最后一条数据,返回上一页

本文详细描述了一个基于IT技术的分页逻辑,如何在内容管理系统中计算总页数、处理最后一页的特殊情况,以及如何根据当前页数动态调整。重点在于代码片段展示了如何高效地管理大量数据的分页显示。
// total 总条数  pageSize 一页多少条   pageNum 当前在第几页
      if (this.total % this.pageSize === 1) {
        // 表格总数量 % 行数  余出的就是当前页有几个
        const lastPage = (this.total + this.pageSize - 1) / this.pageSize; 
        // (表格总数量 +行数 -1) / 行数
        if (this.pageNum === lastPage) {
          // 当前页 === (表格总数量 +行数 -1) / 行数
          this.pageNum = this.pageNum - 1; // 减去一页就是前一页
        }
      }

### 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]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值