在 ElementUI 中使用分頁功能,可以通過 El-pagination 組件來實現。El-pagination 組件提供了一系列屬性和方法來實現分頁查詢功能。
在使用 ElementUI 的分頁功能時,一般需要先設置好總條數(total),每頁顯示條數(pageSize),當前頁碼(currentPage)等屬性。然后可以通過監聽頁碼改變事件(page-change)來觸發查詢方法,從而實現分頁查詢功能。
具體步驟如下:
<el-pagination
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
:total="total">
</el-pagination>
data() {
return {
currentPage: 1,
pageSize: 10,
total: 100,
}
},
methods: {
handleCurrentChange(page) {
// 根據當前頁碼 page 和每頁顯示條數 pageSize 來查詢數據
this.fetchData(page, this.pageSize);
},
fetchData(page, pageSize) {
// 查詢數據的方法
}
}
通過以上步驟,就可以實現 ElementUI 的分頁查詢功能了。當用戶點擊分頁組件中的頁碼或者修改每頁顯示條數時,會觸發相應的事件,從而調用查詢方法獲取對應的數據。