vue+element-ui的分頁完整版

頁面展現：

vue組件中分頁代碼：

<div class="pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="cur_page"
                    :page-sizes="[1, 2, 3, 4]"
                    :page-size="pageNum"
                    layout="total,sizes,  prev, pager, next, jumper"
                    :total="totalCount">
                </el-pagination>
            </div>

先聲明變量：

cur_page:1,//默認在第一頁

pageNum:1,//默認每頁顯示1條數據

totalCount:1，//默認總條數爲一條

一、操做每頁顯示幾條

//操做每頁顯示幾條
            handleSizeChange(val) {
                 this.pageNum=val;
                 this.getPackData();//根據用戶獲取的每頁顯示頁面數量顯示頁面
            },

二、操做當前頁

handleCurrentChange(val) {
                this.cur_page = val;
                this.getPackData();//獲取用戶點擊的當前頁後刷新頁面數據
            },

三、總條數獲取：

totalPageNum(){
                 this.$axios.get("/api/pagePackMade.do").then(res=>{
                    this.totalCount =res.data[0].count;//總信息條數從數據庫獲取;
                }).catch(error=>{
                    console.log(error);
                })
            },