學(xué)習(xí)關(guān)鍵語句:
餓了么加組件分頁組件
element+分頁組件
vue3 + 餓了么分頁組件
寫在前面
必須要說明的是 , 這篇文章使用的分頁組件樣式包含了餓了么官方給出警告以后會棄用的部分![[element plus] 分頁組件使用 - vue](https://imgs.yssmx.com/Uploads/2023/06/490350-1.png)
但是問題是什么呢? 問題就是我還沒找到這個用 vmodel 綁定的使用方法 , 再加上現(xiàn)在也算是有點小忙 , 暫時沒有時間去仔細(xì)探究這里的內(nèi)容
真正的寫在前面
為什么要寫這篇文章 , 是因為沒有內(nèi)容可以寫了 我只看官網(wǎng)的話其實并不是能很快的就曉得怎么用這個分頁組件
所以說如果你看到這里其實是想詳細(xì)了解這個組件的前因后果的話 , 那就可以離開了 .
這篇 我只想讓大家在需要用到分頁組件卻發(fā)現(xiàn)我?官網(wǎng)寫了個錘子 , 我就想趕緊隨便分一分頁把數(shù)據(jù)展示下完事的那些小伙伴們 , 提供一個快速查閱的文章
ps:本次不會有任何實際文件出現(xiàn)
開始
一開始的引用總是讓人很是興奮
畢竟組件庫嘛 , 誰沒用過一樣 , 我們就選擇帶有背景色的分頁來簡單講一講好了
![[element plus] 分頁組件使用 - vue](https://imgs.yssmx.com/Uploads/2023/06/490350-2.png)
通常來說 , 對于這樣一個分頁組件 , 我們需要創(chuàng)建三個變量
// 當(dāng)前頁
let currentPage = ref(1)
// 總條數(shù)
let totalCount = ref(0)
// 每頁顯示限制
let limit = ref(10)
const pageChange = (p: number) => {
currentPage.value = p
// 發(fā)起接口請求數(shù)據(jù) , 請求參數(shù)中使用 currentPage.value 作為查詢當(dāng)前頁碼
}
同時將這三個變量綁定在分頁組件上
<el-pagination
background // 分頁帶有背景色
layout="prev, pager, next" // 分頁組件的布局內(nèi)容 , 當(dāng)前為 上一頁 , 頁碼 , 下一頁
:page-size="limit" // 每頁顯示限制數(shù)量
:total="totalCount" // 全部數(shù)據(jù)總條數(shù) , 通過這個和限制數(shù)量自動得出分幾頁
:current-page="currentPage" // 當(dāng)前是在第幾頁
@current-change="pageChange" // 翻頁事件
/>
根據(jù)官網(wǎng)提供的 API 文檔我們可以得知 , 翻頁事件帶有一個參數(shù)![[element plus] 分頁組件使用 - vue](https://imgs.yssmx.com/Uploads/2023/06/490350-3.png)
我們將它打印出來發(fā)現(xiàn) , 這個參數(shù)就是你選中的第幾頁
所以只要在翻頁事件里將第幾頁作為參數(shù)發(fā)給接口就可以獲取到新頁的數(shù)據(jù)了
結(jié)束
確實結(jié)束了 , 希望能有空在停止支持事件之前就會去把雙向綁定的辦法學(xué)習(xí)到文章來源：http://www.zghlxwxcb.cn/news/detail-490350.html
這樣就能開箱即用了 , 直接復(fù)制上述代碼 , 請求接口回來需要將總條數(shù)賦值上就可以了文章來源地址http://www.zghlxwxcb.cn/news/detail-490350.html
到了這里，關(guān)于[element plus] 分頁組件使用 - vue的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
