vue表格分页el-pagination前两页数据一样

时间: 2023-12-23 18:02:56 浏览: 79

Vue+Element UI+Lumen实现通用表格分页功能

前言最近在做一个前后端分离的项目，前端使用 Vue+ Element UI，而后端则使用 Lumen 做接口开发，其中分页是必不可少的一部分，本文就介绍如何基于以上环境做一个简单、可复用的分页功能。先说后端后端做的事情不多，只需要接受几个参数，根据参数来获取数据即可。需要获取的参数如下： pageSize（一页数据的数量） pageIndex（第几页的数据）然后就可以根据这两个参数计算出偏移量，再从数据库中取出相应的数据。假如现在给出的参数为：pageSize=10，pageIndex = 2，也就是说每一页要10条记录，要第二页。计算偏移量的公式为：page Vue+Element UI+Lumen 实现通用表格分页功能是一个常见的前后端分离应用场景，涉及到的主要知识点包括前端的Vue.js框架、Element UI组件库以及后端的Lumen微服务框架。后端部分使用Lumen处理分页逻辑。在Lumen中，我们需要接收前端传来的两个关键参数：`pageSize`（每页显示数据的数量）和`pageIndex`（当前页码）。通过这两个参数，我们可以计算出从数据库中获取数据的偏移量。偏移量的计算公式为：`pageSize * (pageIndex - 1)`。这确保了我们能正确地跳过前一页的数据，获取到当前页的数据。例如，当`pageSize=10`且`pageIndex=2`时，偏移量为`10 * (2 - 1) = 10`，这意味着从第11个记录开始获取数据。基础的后端代码可能如下： ```php public function getUser(Request $request) { $pageSize = $request->input('pageSize'); $pageIndex = $request->input('pageIndex'); $offset = $pageSize * ($pageIndex - 1); return User::offset($offset)->limit($pageSize)->get(); } ``` 为了提高代码的复用性和健壮性，可以将分页逻辑封装到一个公用的函数中，并设置默认参数值，如下所示： ```php private $default_page_size = 30; private $default_page_index = 1; // 公用分页 public function pagination($request, $list) { $pageSize = $request->input('pageSize', $this->default_page_size); $pageIndex = $request->input('pageIndex', $this->default_page_index); $offset = $pageSize * ($pageIndex - 1); $total = $list->count(); $list = $list->offset($offset)->limit($pageSize); return ['list' => $list->get(), 'total' => $total]; } // 获取用户列表 public function getUser(Request $request) { $list = User::query(); // 这里可以添加其他查询操作 return $this->pagination($request, $list); } ``` 前端部分，主要使用Vue.js和Element UI构建用户界面。Element UI提供了丰富的表格组件，其中包括分页功能。在Vue.js中，我们可以利用Vuex来管理状态，实现分页数据的获取和持久化。我们需要在Vuex的`store.js`中定义状态、mutation、action和getter。状态`user`包含了列表数据、总条数、当前页码和每页大小。每次获取数据时，使用action中的`getUser`方法，同时通过getter`requestData`将分页参数添加到请求中： ```javascript export default new Vuex.Store({ state: { user: { list: [], total: 0, pageIndex: 1, pageSize: 10, }, }, mutations: { updateUser(state, data) { state.user = { ...state.user, ...data }; }, }, actions: { async getUser({ commit, state, getters }) { const res = await $axios.get('/user', getters.requestData(state.user)); commit('updateUser', res); }, }, getters: { requestData(state) { const { pageIndex, pageSize } = state.user; const data = { pageIndex, pageSize }; return data; }, }, }); ``` 为了实现数据的持久化，可以使用`vuex-localstorage`插件。安装后，在store配置中引入并使用它来保存和恢复`user`状态： ```javascript import createPersist from 'vuex-localstorage'; // 在store的配置中添加 plugins: [createPersist()] ``` 前端页面上，我们可以使用Element UI的`<el-pagination>`组件，结合Vuex的getter来渲染分页控件，并监听其事件，更新状态： ```html <template> <div> <el-table :data="user.list"></el-table> <el-pagination @current-change="handleCurrentChange" :current-page="user.pageIndex" :page-size="user.pageSize" :total="user.total" ></el-pagination> </div> </template> <script> import { mapState, mapGetters } from 'vuex'; export default { computed: { ...mapState(['user']), ...mapGetters(['requestData']), }, methods: { handleCurrentChange(page) { this.$store.commit('updateUser', { pageIndex: page }); }, }, }; </script> ``` 通过这种方式，前端能够根据用户交互和后端返回的信息动态调整分页，实现一个可复用的通用表格分页功能。同时，前端的分页状态会在页面刷新后得到恢复，确保用户体验的一致性。

这种情况可能是因为你的分页组件和数据源之间的数据传递有问题。可以先检查你的数据源，确保每一页的数据是正确的。然后检查分页组件中的配置项，特别是页码和每页显示的条数是否正确。如果这些都没有问题，那么可能需要检查一下你的代码逻辑，看看是否有重复的数据被传递给了分页组件。另外，你可以尝试使用Vue.js的调试工具来帮助你找出问题所在。

阅读全文

vue表格分页el-pagination前两页数据一样

相关推荐

Vue2.5与Element UI实战：Table和Pagination分页实现

Vue2.5与Element UI实战：Table和Pagination分页组件封装

【Vue2 + ElementUI】分页el-pagination 封装成公用组件

vue分页查询el-pagination第一页为0页怎么编写

el-pagination vue3分页

vue-pagination-bootstrap-具有基于Bootstrap的模板的Vue.js（1.x和2.x）服务器端分页组件-Vue.js开发

使用vue2和el-Pagination分页器，实现 一个功能，有在第三页 ，点击一个重置按钮，回到第一页，

django + vue3 el-pagination怎么处理分页

vue el-pagination

vue ts el-pagination 设置中文

vue里el-pagination显示中文

el-pagination 分页

vue3二次封装el-pagination

el-pagination分页组件

el-pagination分页背景色

el-pagination分页怎么用

el-pagination实现动态分页

如何设置el-pagination小型分页

用el-pagination做前端分页

最新推荐

vue+element tabs选项卡分页效果

vue+elementUI组件table实现前端分页功能

Windows平台下的Fastboot工具使用指南

管理建模和仿真的文件

DLMS规约深度剖析：从基础到电力通信标准的全面掌握

修改代码，使其正确运行

Python机器学习基础入门与项目实践

"互动学习：行动中的多样性与论文攻读经历"

【Shell脚本进阶】：wc命令行数统计的高级用法及解决方案

python编写一个程序，使得根据输入的起点和终点坐标值计算出坐标方位角

使用vue2和el-Pagination分页器，实现一个功能，有在第三页，点击一个重置按钮，回到第一页，