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