Vue后臺(tái)管理系統(tǒng)之實(shí)現(xiàn)分頁(yè)功能示例
本文主要介紹了Vue后臺(tái)管理系統(tǒng)之實(shí)現(xiàn)分頁(yè)功能,分享給大家,具體如下:
效果圖:

功能描述:
- 顯示數(shù)據(jù)的總數(shù)目
- 可選擇每天的顯示條數(shù)
- 點(diǎn)擊頁(yè)碼跳轉(zhuǎn)到指定頁(yè)數(shù)
- 輸入頁(yè)碼可跳轉(zhuǎn)到指定頁(yè)
1.功能實(shí)現(xiàn)
1.1 結(jié)構(gòu)
<!-- 分頁(yè) -->
<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 {
//請(qǐng)求參數(shù)
queryInfo: {
type: 3,
//當(dāng)前頁(yè)數(shù)
pagenum: 1,
//指定當(dāng)前頁(yè)數(shù)顯示的數(shù)目
pagesize: 5,
},
goodsList: [],
//總數(shù)據(jù)
total: 0,
}
}
methods: {
//獲取商品分類(lèi)數(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)聽(tīng)每頁(yè)的條數(shù)
handleSizeChange(pagesize) {
// console.log(`每頁(yè) ${val} 條`)
this.queryInfo.pagesize = pagesize
this.getGoodsCate()
},
//監(jiān)聽(tīng)當(dāng)前頁(yè)數(shù)
handleCurrentChange(pageNum) {
this.queryInfo.pagenum = pageNum
this.getGoodsCate()
},
},
1.3 參數(shù)說(shuō)明


1.4 效果演示



到此這篇關(guān)于Vue后臺(tái)管理系統(tǒng)之實(shí)現(xiàn)分頁(yè)功能示例的文章就介紹到這了,更多相關(guān)Vue 分頁(yè) 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue 封裝防刷新考試倒計(jì)時(shí)組件的實(shí)現(xiàn)
- Vue3后臺(tái)管理系統(tǒng)之創(chuàng)建和配置項(xiàng)目
- VUE+element開(kāi)發(fā)后臺(tái)管理的搜索功能
- vue后臺(tái)管理如何配置動(dòng)態(tài)路由菜單
- Vue+Element的后臺(tái)管理框架的整合實(shí)踐
- vue后臺(tái)管理添加多語(yǔ)言功能的實(shí)現(xiàn)示例
- Vue 電商后臺(tái)管理項(xiàng)目階段性總結(jié)(推薦)
- Vue考試系統(tǒng)的后臺(tái)管理功能開(kāi)發(fā)示例解讀
相關(guān)文章
Vue過(guò)濾器,生命周期函數(shù)和vue-resource簡(jiǎn)單介紹
這篇文章主要介紹了Vue過(guò)濾器,生命周期函數(shù)和vue-resource簡(jiǎn)單介紹,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2021-01-01
vue基礎(chǔ)之data存儲(chǔ)數(shù)據(jù)及v-for循環(huán)用法示例
這篇文章主要介紹了vue基礎(chǔ)之data存儲(chǔ)數(shù)據(jù)及v-for循環(huán)用法,結(jié)合實(shí)例形式分析了vue.js使用data存儲(chǔ)數(shù)據(jù)、讀取數(shù)據(jù)及v-for遍歷數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
超詳細(xì)的5個(gè)Shell腳本實(shí)例分享(值得收藏)
這篇文章主要介紹了超詳細(xì)的5個(gè)Shell腳本實(shí)例分享(值得收藏),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue-autoui自匹配webapi的UI控件的實(shí)現(xiàn)
這篇文章主要介紹了vue-autoui自匹配webapi的UI控件的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue2使用wangeditor實(shí)現(xiàn)數(shù)學(xué)公式和富文本編輯器
這篇文章主要為大家詳細(xì)介紹了vue2如何使用wangeditor實(shí)現(xiàn)數(shù)學(xué)公式和富文本編輯器功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-12-12
vue 實(shí)現(xiàn)LED數(shù)字時(shí)鐘效果(開(kāi)箱即用)
這篇文章主要介紹了vue 實(shí)現(xiàn)LED數(shù)字時(shí)鐘效果(開(kāi)箱即用),每一個(gè)數(shù)字由七個(gè)元素構(gòu)成,即每一個(gè)segment元素,本文給大家分享實(shí)現(xiàn)實(shí)例,感興趣的朋友一起看看吧2019-12-12

