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 相关文章推荐
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
js电话号码验证方法
Sep 28 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
微信小程序功能之全屏滚动效果的实现代码
Nov 22 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
PHP动态创建Web站点的方法
2011/08/14 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
在layui中select更改后生效的方法
2019/09/05 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
简单谈谈Python中的反转字符串问题
2016/10/24 Python
简单实现python聊天程序
2018/04/01 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
计算机专业学生的自我评价
2013/12/15 职场文书
活动策划邀请函
2014/02/06 职场文书
电子商务求职信
2014/06/15 职场文书
工商管理自荐书
2014/07/06 职场文书
婚宴致辞
2015/07/28 职场文书