vue2.0+Element UI 表格前端分頁和后端分頁

之前寫過一篇博客，當時對element ui框架還不太了解，分頁組件用 html + css 自己寫的，比較麻煩，而且只提到了后端分頁 （見 https://www.cnblogs.com/zdd2017/p/9714633.html）。由於工作上的需要，寫了很多表格，因此對於分頁有了新的理解，在這里重新總結一下，用 element ui 自帶的分頁組件實現前端分頁和后端分頁。

首先我們將分頁功能的代碼封裝成一個組件，這樣以后要用的時候可以直接拿，這里需要一個預備知識就是父子組件的交互，不清楚的可以自己先看一下。

新建pagination.vue文件，內容如下：

<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes.sync="pageSizes"
      :pager-count.sync="pageCount"
      :pager-count="pageCount"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { scrollTo } from "@/utils/scroll-to";

export default {
  name: "Pagination",
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 10
    },
    pageCount: {
      type: Number,
      default: 5
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50];
      }
    },
    layout: {
      type: String,
      default: "total, sizes, prev, pager, next, jumper"
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page;
      },
      set(val) {
        this.$emit("update:page", val);
      }
    },
    pageSize: {
      get() {
        return this.limit;
      },
      set(val) {
        this.$emit("update:limit", val);
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit("pagination", { page: this.currentPage, limit: val });
      if (this.autoScroll) {
        scrollTo(0, 800);
      }
    },
    handleCurrentChange(val) {
      this.$emit("pagination", { page: val, limit: this.pageSize });
      if (this.autoScroll) {
        scrollTo(0, 800);
      }
    }
  }
};
</script>

<style scoped>
.pagination-container {
  background: #fff;
  padding: 32px 16px;
}
.pagination-container.hidden {
  display: none;
}
</style>

新建父組件myTable.vue，引入pagination插件

<el-table
      v-loading="listLoading"
      :key="tableKey"
      :data="list"
      border
      fit
      style="width: 100%;"
    >
<!--  表格內容省略 -->
…………

</el-table>

<!-- 引入pagination插件 -->
<pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

注冊變量、方法

export default {
    data() {
        return {
            list: null,
            total: 0,
            listQuery: {
                page: 1,
                limit: 10
            }
        }
    },
　　 created() {
        this.getList();
    }
    methods: {
        // 獲取列表數據
        getList() {}
    }
}            

在首次進入頁面, created 階段以及每次點擊頁碼時調用 getList() 方法，getList() 方法根據前端分頁和后端分頁的不同需求有不同寫法。

先看后端分頁，后端分頁比較簡單，只要將當前頁數 page 與每頁顯示條數 limit 傳給后台，再把后台返回的數據賦值給list即可。

getList() {
    axios.get('/list', {
        params: this.listQuery
    }).then(res => {
        this.list = res.value.list;
    })
}

 

前端分頁一次性拿到所有數據，要根據 page 和 limit 以及 total 通過前端計算來決定每一頁展示哪些數據，計算公式為

this.list = res.value.list.slice((this.listQuery.page - 1) * this.listQuery.limit, this.listQuery.page * this.listQuery.limit);

這里有一個問題，因為我們第一次請求就已經拿到了所有的數據，所以在每次點擊頁碼時就沒必要再發送請求。這里我們可以用一個變量alllist來緩存表格數據，然后每次點擊頁碼時先檢查alllist是否為空，為空則發送請求請求表格數據；不為空則不發送請求，直接拿alllist里的值來處理。

在 data 里注冊 alllist 變量后，getList() 方法如下：

getList(pagination) {
      if (this.alllist) {
        if (pagination) {
          this.listQuery.page = pagination.page;
          this.listQuery.limit = pagination.limit;
        }
        this.list = this.alllist.slice(
          (this.listQuery.page - 1) * this.listQuery.limit,
          this.listQuery.page * this.listQuery.limit
        );
      } else {
        axios.get('/list', {
            params:  this.listQuery
        }).then(response => {
            this.alllist = response.value.list;
            this.total = response.value.list.length;
            this.list = this.alllist.slice(
                (this.listQuery.page - 1) * this.listQuery.limit,
                this.listQuery.page * this.listQuery.limit
            );
        });
      }
    }

其中，pagination 參數只有在點擊頁碼的時候才會由 pagination 組件通過觸發 myTable 組件的 pagination 事件傳遞過來。