Vue EasyUI 分頁

2020-06-24 11:41 更新

分頁( Pagination )允許用戶通過反野導航數(shù)據(jù)。 分頁( Pagination )支持頁面導航和頁面長度選擇的可配置選項。 分頁( Pagination )可在右側(cè)添加自定義按鈕增強功能性。

屬性列表

名稱 數(shù)據(jù)類型 作用描述 默認值
pageList number[] 定義可以更改大小。 [10,20,30,40,50]
loading boolean 是否正在加載數(shù)據(jù)。 false
showPageList boolean 是否顯示頁列表。 true
showPageInfo boolean 是否顯示頁面信息。 true
showPageRefresh boolean 是否顯示刷新按鈕。 true
links number 鏈接數(shù)量。 10
beforePageText string 在輸入組件之前顯示一個標簽。 Page
afterPageText string 在輸入組件之后顯示一個標簽。 of {pages}
displayMsg string 顯示頁面信息。 Displaying {from} to {to} of {total} items
layout string[] 分頁布局定義??蛇x值是:'list', 'sep', 'first', 'prev', 'sep', 'tpl', 'sep', 'next', 'last', 'sep', 'refresh', 'info', 'links'。 ['first', 'prev', 'links', 'next', 'last', 'refresh']
pageNumber number 初始化頁碼。 1
pageSize number 初始化頁面大小。 10
total number 初始化總記錄數(shù)。 0

事件列表

名稱 參數(shù) 作用描述
pageChange pageNumber, pageSize 當頁面更改時觸發(fā)。

注:
- 繼承: None 。

使用方法

通過面板( Panel )和分頁( Pagination )組件創(chuàng)建分頁。

<Panel :bodyStyle="{padding:'20px'}">
    <p>Total: {{total}}</p>
    <p>Page Number: {{pageNumber}}</p>
    <p>Page Size: {{pageSize}}</p>
    <template slot="footer">
        <Pagination :total="total" :pageSize="pageSize" :pageNumber="pageNumber" @pageChange="onPageChange($event)"></Pagination>
    </template>
</Panel>
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號