Vue+Element UI+Lumen如何實現通用表格分頁功能

這篇文章主要為大家展示了“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;
   }
  },
 }
})

數據持久化

現在如何獲取數據已經搞定了，數據持久化我使用 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"
  
  >
  <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>

以上是“Vue+Element UI+Lumen如何實現通用表格分頁功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！