VUE學習（五） 分頁

這裏分頁採用的是element-ui的分頁組件，喜歡自己研究的小夥伴可以去element-ui的官網去查看使用方法。這裏簡單介紹下分頁的流程吧！

 想要對查詢的數據進行分頁，首先需要知道查詢的數據總共有多少條，然後是每頁展示多少條，第幾頁！知道這三個就足夠了。其中

totalSize:是總條數，需要後臺查詢後返回

cur_page:是當前頁，也就是查看第幾頁的數據，需要前端傳給後端接口

pageSize:是每頁展示多少條，前端寫死就好

頁面

<div class="pagination">
     <el-pagination background @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="totalSize" :pageSize="pageSize">
      </el-pagination>
 </div>

數據

data() {
       return {
                tableData: [],
                cur_page: 1,
                totalSize:0,
                pageSize:10
               
            }
        }

方法

分頁插件中綁定了一個handleCurrentChange 方法，這個方法是我們點擊分頁的下一頁，或是第幾頁的時候觸發。

            handleCurrentChange(val) {
                this.cur_page = val;
                this.getData();
            },

每次點擊切換頁面後，就會執行查詢數據的方法getData

            getData() {
                this.$api.queryOrg({
                   currentPage:this.cur_page,
                   pageSize:this.pageSize
                }).then((res) => {
                    this.totalSize = res.total;
                    this.tableData = res.list;
                })
            },