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

前言

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

先说后端

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

需要获取的参数如下：

• pagesize（一页数据的数量）
• pageindex（第几页的数据）

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

假如现在给出的参数为：pagesize=10，pageindex = 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;
   }
  },
 }
})

数据持久化

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

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>

后记

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。