vue+element-ui的分頁完整版

漂亮得皮皮發表於2018-08-15
頁面展示:

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,//預設總條數為一條
1、操作每頁顯示幾條

 handleSizeChange(val) {                 this.pageNum=val;                 this.getPackData();//根據使用者獲取的每頁顯示頁面數量顯示頁面            },複製程式碼


2、操作當前頁

 handleCurrentChange(val) {                this.cur_page = val;                this.getPackData();//獲取使用者點選的當前頁後重新整理頁面資料            },複製程式碼

3、總條數獲取:

 totalPageNum(){                 this.$axios.get("/api/pagePackMade.do").then(res=>{                    this.totalCount =res.data[0].count;//總資訊條數從資料庫獲取;                }).catch(error=>{                    console.log(error);                })            },複製程式碼


相關文章