對element ui中的分頁元件進行二次封裝

2021-10-22 06:49:36 字數 2652 閱讀 4202

本節要掌握的幾個概念

通過$emit向父元件派發乙個事件並傳遞引數

handlesizechange


(val =


this


.limit)


,
父元件中只需要接受這個事件並處理就行了

v-on:update =


"pagesize = $event"
也可以寫成這樣

handlesizechange


(val =


this


.limit)


,
v-on:update:limit =


"pagesize = $event"
而這樣的寫法被封裝成了乙個語法糖，在父元件中可以使用.sync來代替,這樣就可以獲得子元件傳遞過來的值了。（$event是固定寫法，代表從子元件中傳遞過來的值）

:limit.sync =


"pagesize"
所以sync的作用與v-on:update:limit = "pagesize = $event"這段**的作用是一樣的，只不過更簡潔了。

自定義的分頁元件



@size-change=


"handlesizechange"


@current-change=


"handlecurrentchange"


:current-page.sync=


"currentpage"


:page-sizes=


"pagesizes"


:page-size.sync=


"limit"


:layout=


"layout"


:total=


"total"


>


<


/el-pagination>


<


/div>


<


/template>


export


default


,// 每頁顯示條目數


pagesize :


,            pagesizes :},


layout :


,            total :},


computed:


,set


(val)},


limit:


,set


(val)}}


,data()


},methods:


,handlecurrentchange


(val =


this


.currentpage)},


}<


/script>


<


/style>
在父元件中應用子元件，由於沒有後台，這邊是在前端做了乙個假分頁



"tabledatacopy" style=


"width: 100%"


>


"date" label=


"日期" width=


"180"


>


<


/el-table-column>


"name" label=


"姓名" width=


"180"


>


<


/el-table-column>


"address" label=


"位址"


>


<


/el-table-column>


<


/el-table>


:limit.sync =


"pagesize"


:page.sync =


"currentpage"


@change=


"handlecurrentchange"


:total =


'total'


@changesize =


"handlesizechange"


@update =


"pagesize = $event,show"


>


<


/pagination>


<


/div>


<


/template>


import pagination from


"../../components/pagination"


export


default,,


,,],


};},


components:


,  methods:


,getlist


(val)


,handlesizechange


(val)條`)


;},handlecurrentchange


(val)


else


console.


log(


`當前頁: $`


);},


change()


},created()


};<


/script>


<


/style>
重點要掌握sync的用法

Element UI 的分頁元件

sizechange size 當使用者單擊任意頁碼或實現頁面跳轉時會觸發current page屬性的變化。currentchange current 擷取頁數 woekeralldata.slice pagenumber currentchangeindex 1 pagenumber curre...

對element ui的分頁進行二次封裝成元件

因為我的專案風格要統一，所以對el pagination中的樣式做修改 pagea layout prev,pager,next background total pager props.total current page.sync pager props.page page size pager...

element ui前端分頁 與後端分頁的問題

前端分頁 一次性請求所有資料 然後前端對資料進行擷取展示 後端分頁 需要我們把頁碼 請求條數傳送給後端 後端根據條件每次返回對應的條數 data tabledatas.slice currentpage 1 pagesize,currentpage pagesize style width 100 ...