關於element元件中分頁的一些個人思路

2022-08-19 20:12:10 字數 807 閱讀 8346

最近在用element,用到了它的分頁這個元件,我這邊的情況是,我前端請求資料,資料大概有20個的樣子,把資料存在data的乙個陣列裡面,用乙個v-for迴圈遍歷陣列內容,並用div裝起來,這樣20個資料就從上往下排列了出來,但是我想使用分頁,乙個分頁只顯示5個資料,那麼就有4頁,這個效果怎麼做到呢?

我本人也是思考了一下,主要用到裡面的兩個屬性乙個方法,屬性是

:page-size="5"

:total="sites[0].allpages">

sites是後台返回的json資料,且後台在陣列下標為0返回的是我的乙個總長度,也就是20,我這邊迴圈是用了陣列的乙個slice方法讓其從1開始迴圈,element會自動根據你的size和total生成總的

頁數,先貼我的**

},error: function (data)

});},

這裡這個方法是當你頁數變化時,也就是你點1,2,3,4頁時執行的函式,裡面的引數val是你當前點選哪個頁數的數字,我的思路是我在頁數變化時傳送乙個ajax給後台,並把val值傳給後台

後台根據val值判斷傳回來的資料是哪些,但是乙個bug出來了,就是這個函式是必須你點選頁面角標變化時才執行,也就是我一開始頁面載入完後我什麼都看不到,但是我點到第二頁後,資料便出來了,這個時候可以在mounted函式中乙個ajax請求,並傳乙個數字1,因為點到第二頁才生效,第一頁相當於後台沒有得到傳過去的資料,所以沒做處理,因為我在頁面載入完後自動是第一頁,那麼我把1傳給後台,後台再響應並傳回原本屬於1的資料,這樣就完成了。但是效能方面還沒有考慮,需要在後面測試的時候才知道,這也只是我本人的乙個思路,希望有更好的辦法的同學多多幫幫我呀哈哈哈

封裝element分頁元件

將 element ui 中分頁封裝成公共元件 admin後台中會有很多的 以及分頁的應用,所以考慮將分頁分裝成公共元件 封裝元件 vue頁面 background background current page.sync currentpage page size.sync pagesize la...

element分頁元件修改樣式

這裡使用穿透修改 格式 外層 第三方元件 scss格式 deep 第三方元件 元件樣式 fenye el pager li 分頁啟用樣式 fenye el pagination.is background el pager li not disabled active 禁止狀態按鈕的樣式 fenye...

vue cli專案中分頁元件封裝

為了方便理解整個元件 都在這 元件部分 class select v if size limit layout prev,pager,next prev text next text current change goindex current page index page size limit ...