使用element-ui的Pagination分頁的注意事項及說明
更新時間：2024年02月27日 16:42:55 作者：月光下的漢堡包
這篇文章主要介紹了使用element-ui的Pagination分頁的注意事項及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
element-ui的Pagination分頁注意事項
當(dāng)在一個小彈窗中使用分頁功能時，因為彈窗寬度較小，分頁長度一度超出彈窗需要調(diào)整分頁長度。
<el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000"> </el-pagination>
發(fā)現(xiàn)element中自帶可以折疊頁碼按鈕的數(shù)量，隨意給了一個值（是個偶數(shù)）后發(fā)現(xiàn)報錯了，自習(xí)翻看文檔發(fā)現(xiàn)，當(dāng)前值只能設(shè)置奇數(shù)會生效。
于是修改為奇數(shù)，問題就解決了
element-ui之el-pagination踩過的坑
由于頁面設(shè)計得彈窗他寬度不夠，還要分成三部分，中間部分是選擇人的分頁，這就很難辦了，把能省的都省了，寬度還是太大，就想著把分頁跳轉(zhuǎn)的改少一些，設(shè)置可選的跳轉(zhuǎn)為3頁，其余省略號顯示，我選擇了pager-count
如下：
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="leftPage.currentPage"
layout="prev, pager, next,sies, jumper"
:total="10"
:pagerCount="2"
></el-pagination>雖然頁面顯示出來了。。。但是報錯了
頁面：
報錯：
[Vue warn]: Invalid prop: custom validator check failed for prop "pagerCount".
完了就去查了element的手冊
意思就是pager-count只能設(shè)置5-21的奇數(shù)，無法實現(xiàn)只顯示兩個頁碼所以我就給設(shè)置了最小值5了，結(jié)果頁面顯示還可以。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue按需加載組件webpack require.ensure的方法
本篇文章主要介紹了vue按需加載組件webpack require.ensure的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要給大家介紹了關(guān)于vue項目回到頂部的兩種超簡單實現(xiàn)方法,?頁面切換回到頂部是一個很常見的功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Element Tooltip 文字提示的使用示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue 解決provide和inject響應(yīng)的問題
這篇文章主要介紹了vue 解決provide和inject響應(yīng)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue渲染過程淺析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
vue百度地圖修改折線顏色,添加icon和文字標(biāo)注方式
這篇文章主要介紹了vue百度地圖修改折線顏色,添加icon和文字標(biāo)注方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue form 表單提交+ajax異步請求+分頁效果,需要的朋友可以參考下2017-04-04
今天小編就為大家分享一篇vue 中滾動條始終定位在底部的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在elementui中Notification組件添加點擊事件實例
這篇文章主要介紹了在elementui中Notification組件添加點擊事件實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
EventBus稱為事件總線,當(dāng)兩個組件屬于不同的兩個組件分支,或者兩個組件沒有任何聯(lián)系的時候,不想使用Vuex這樣的庫來進(jìn)行數(shù)據(jù)通信,就可以通過事件總線來進(jìn)行通信,這篇文章主要給大家介紹了關(guān)于Vue?eventBus事件總線封裝后再用的相關(guān)資料,需要的朋友可以參考下2022-06-06