element分頁功能

2021-10-03 22:38:00 字數 896 閱讀 3805

今天用了這個element的分頁功能，有坑，所以記錄一下。官方給的用法是針對**的，對**之外的分頁並不友好，先說**的，主要點就在於資料繫結，得在el-table標籤裡加上

:data="tabledata.slice((currentpage-1)*pagesize,currentpage*pagesize)"
今天主要來說說不是**形式的分頁。

1.直接複製官方給的標籤

"handlesizechange"


@current-change="handlecurrentchange"


:current-page="pageno"


:page-size="pagesize"


layout="total, sizes, prev, pager, next, jumper"


:total="number.length"


>
2.在data了加上 標籤裡繫結的資料

pageno


: 1, //當前頁


pagesize


: 15 //每頁顯示條目數
3.寫上標籤裡繫結的兩個change的方法

//分頁大小改變


handlesizechange(val)


,    //當前頁數改變


handlecurrentchange(val)
4.最重要的一步，也是和**分頁的區別，這裡直接用computed來監控資料。然後在標籤的v-for直接迴圈userdata就可以了。

computed:

封裝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...

分頁查詢功能

這兩個月來，一直在學做專案，學到了乙個如何做分頁，將頁面設計做得更加簡潔。下面是乙個用儲存過程寫的分頁查詢功能。分頁查詢，功能通用 create proc pagingforall tablename nvarchar 50 表 columns nvarchar 500 查詢的列 where nva...