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


Posted in Javascript onFebruary 02, 2019

前言

最近在做一个前后端分离的项目,前端使用 Vue+ Element UI,而后端则使用 Lumen 做接口开发,其中分页是必不可少的一部分,本文就介绍如何基于以上环境做一个简单、可复用的分页功能。

先说后端

后端做的事情不多,只需要接受几个参数,根据参数来获取数据即可。

需要获取的参数如下:

  • pageSize(一页数据的数量)
  • pageIndex(第几页的数据)

然后就可以根据这两个参数计算出偏移量,再从数据库中取出相应的数据。

假如现在给出的参数为:pageSize=10pageIndex = 2,也就是说每一页要10条记录,要第二页。

计算偏移量的公式为:pageSize * (pageIndex - 1)

基本代码如下:

public function getUser(Request $request){
 $pageSize = $request->input('pageSize');
 $pageIndex = $request->input('pageIndex');
 $offset = $pageSize * ($pageIndex - 1);
 return User::offset($offset)
    ->limit($pageSize)
    ->get();
}

后端基本上只需要做这么多,就可以完成一个分页的功能了,但还是有几处地方需要改进一下:

  • 给参数一个默认值
  • 前端还需要知道整个表的数据的总数
  • 把分页做成一个公用的函数

改进后的代码如下:

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);
}

再说前端

前端相对于需要做的事情就比较多了,需要考虑几点:

  • 获取数据时需要带上分页的参数
  • 分页参数需要进行本地持久化,以免刷新页面回到第一页(后端设置的默认值)
  • 同样要抽象出一个通用的分页组件

获取数据

这里我们用 vuex来管理状态,然后在请求时带上分页数据:

store.js:

注意:

  • 这里为了方便展示代码,并没有使用模块化,项目中,最好将使用模块化方便管理。
  • 这里默认读者清楚 ES6 的语法
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}) {
   // $axios 只是我自己封装的一个函数 这里并不重要
   const res = await $axios.get('/user',getters.requestData(state.user))
   commit('updateUser',res);
  },
 },
 getters:{
  requestData(state) {
   return (origin) => {
    const {
     pageIndex,
     pageSize,
    } = origin;
    const data = {
     pageIndex,
     pageSize,
    };
    return data;
   }
  },
 }
})

数据持久化

现在如何获取数据已经搞定了,数据持久化我使用 vuex-localstorage,安装后,只需要在上面代码的基础上添加:

import createPersist from 'vuex-localstorage'
export default new vuex.Store({
 // 接着上面的
 plugins: [createPersist({
  namespace: 'studio-user',
  initialState: {},
  // ONE_WEEK
  expires: 7 * 24 * 60 * 60 * 1e3
 })]
})

公用分页组件

<template>
 <el-Pagination
 background
 layout="total, sizes, prev, pager, next, jumper"
 :total="module.total"
 :current-page.sync="module.pageIndex"
 :page-sizes="module.pageSizes"
 :page-size.sync="module.pageSize"
 @current-change="handleCurrentChange"
 @size-change="handleSizeChange"
 >
 </el-Pagination>
</template>
<script>
export default {
 props: {
 module: Object
 },
 methods: {
 getData() {
  this.$emit("get-data");
 },
 handleCurrentChange() {
  this.getData();
 },
 handleSizeChange(val) {
  this.getData();
 }
 }
};
</script>

使用分页组件

<template>
 <div class="container">
 <el-table
  :data="user.list"
  style="width: 100%;"
  >
  <el-table-column
   v-for="(item,index) in columns"
   :key="index"
   :prop="item.prop"
   :label="item.label"
   align="center"
  />
  </el-table>
  <pagination
  :module="user"
  @get-data="getData"
  />
 </div>
</template>
<script>
import Pagination from "@/common/components/Pagination";
import { mapActions, mapState } from "vuex";
export default {
 components: {
 Pagination,
 },
 data: () => ({
 columns: [
  {
  prop: "name",
  label: "姓名"
  },
  {
  prop: "性别",
  label: "sex"
  },
  {
  prop: "年龄",
  label: "age"
  },
 ]
 }),
 created() {
 this.getData();
 },
 methods: {
  ...mapActions({
   getData : "getUser",
  }) 
 },
 computed: {
 ...mapState(["user"])
 }
};
</script>

后记

将一些常用的功能抽象出来,打造一个自己的工具库,从而使开发效率更高。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 操作XML入门
Dec 25 Javascript
IE 下的只读 innerHTML
Aug 21 Javascript
js 省地市级联选择
Feb 07 Javascript
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
基于jquery的可多选的下拉列表框
Jul 20 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 Javascript
design vue 表格开启列排序的操作
Oct 28 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 #Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 #Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 #Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 #Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 #Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 #Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 #Javascript
You might like
一周学会PHP(视频)Http下载
2006/12/12 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
php while循环得到循环次数
2013/10/26 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
对python函数签名的方法详解
2019/01/22 Python
python按照多个条件排序的方法
2019/02/08 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
flask框架中的cookie和session使用
2021/01/31 Python
内科护士实习自我鉴定
2013/10/17 职场文书
毕业生的自我评价分享
2013/12/18 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
工程负责人任命书
2014/06/06 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
加强党性修养心得体会
2016/01/21 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers