elementui分页组件复用-Vue+Element UI+Lumen实现万能表格分页功能

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

前言

最近在做一个前后端分离的项目。 前端使用Vue+Element UI，前端使用Lumen进行socket开发elementui分页组件复用，其中分页是必不可少的一部分。 本文将介绍如何基于上述环境制作一个简单且可复用的分页。 功能。

先说前端

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

需要获取的参数如下：

然后可以根据这两个参数来估计偏移量，并可以从数据库中检索相应的数据。

如果现在给出的参数为：pageSize=10elementui分页组件复用，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来管理状态，然后在请求的时候带上分页数据：

商店.js：

注意：

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

常用分页组件

 
 


export default {
 props: {
 module: Object
 },
 methods: {
 getData() {
  this.$emit("get-data");
 },
 handleCurrentChange() {
  this.getData();
 },
 handleSizeChange(val) {
  this.getData();
 }
 }
};

使用分页组件

 

 
  
  
  
 


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 Home。