Vue后臺管理系統(tǒng)之實現(xiàn)分頁功能示例
本文主要介紹了Vue后臺管理系統(tǒng)之實現(xiàn)分頁功能,分享給大家,具體如下:
效果圖:
功能描述:
- 顯示數(shù)據(jù)的總數(shù)目
- 可選擇每天的顯示條數(shù)
- 點擊頁碼跳轉(zhuǎn)到指定頁數(shù)
- 輸入頁碼可跳轉(zhuǎn)到指定頁
1.功能實現(xiàn)
1.1 結(jié)構(gòu)
<!-- 分頁 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[2, 5, 10, 15]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" > </el-pagination>
1.2 邏輯
data() { return { //請求參數(shù) queryInfo: { type: 3, //當(dāng)前頁數(shù) pagenum: 1, //指定當(dāng)前頁數(shù)顯示的數(shù)目 pagesize: 5, }, goodsList: [], //總數(shù)據(jù) total: 0, } } methods: { //獲取商品分類數(shù)據(jù) async getGoodsCate() { const { data: res } = await this.$http.get("categories", { params: this.queryInfo, }) if (res.meta.status !== 200) { this.$message.error("獲取參數(shù)失敗") } this.total = res.data.total this.goodsList = res.data.result //console.log(this.goodsList) }, //監(jiān)聽每頁的條數(shù) handleSizeChange(pagesize) { // console.log(`每頁 ${val} 條`) this.queryInfo.pagesize = pagesize this.getGoodsCate() }, //監(jiān)聽當(dāng)前頁數(shù) handleCurrentChange(pageNum) { this.queryInfo.pagenum = pageNum this.getGoodsCate() }, },
1.3 參數(shù)說明
1.4 效果演示
到此這篇關(guān)于Vue后臺管理系統(tǒng)之實現(xiàn)分頁功能示例的文章就介紹到這了,更多相關(guān)Vue 分頁 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue過濾器,生命周期函數(shù)和vue-resource簡單介紹
這篇文章主要介紹了Vue過濾器,生命周期函數(shù)和vue-resource簡單介紹,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2021-01-01vue基礎(chǔ)之data存儲數(shù)據(jù)及v-for循環(huán)用法示例
這篇文章主要介紹了vue基礎(chǔ)之data存儲數(shù)據(jù)及v-for循環(huán)用法,結(jié)合實例形式分析了vue.js使用data存儲數(shù)據(jù)、讀取數(shù)據(jù)及v-for遍歷數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下2019-03-03vue-autoui自匹配webapi的UI控件的實現(xiàn)
這篇文章主要介紹了vue-autoui自匹配webapi的UI控件的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03vue2使用wangeditor實現(xiàn)數(shù)學(xué)公式和富文本編輯器
這篇文章主要為大家詳細(xì)介紹了vue2如何使用wangeditor實現(xiàn)數(shù)學(xué)公式和富文本編輯器功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-12-12vue 實現(xiàn)LED數(shù)字時鐘效果(開箱即用)
這篇文章主要介紹了vue 實現(xiàn)LED數(shù)字時鐘效果(開箱即用),每一個數(shù)字由七個元素構(gòu)成,即每一個segment元素,本文給大家分享實現(xiàn)實例,感興趣的朋友一起看看吧2019-12-12