之前在寫代碼的時候，很多頁面都會有table展示，有table分頁也基本少不了，而且element-ui的分組組件提供了四個事件，以及那么多引數，若每個分頁都寫下，復用性太低了，方便統一風格，好維護，尤其是方法多了后，代碼很雜，
版本：element-ui 2.13.1
vue 2.6.11
| 事件名稱 | 說明 | 回呼引數 |
|---|---|---|
| size-change | pageSize 改變時會觸發 | 每頁條數 |
| current-change | currentPage 改變時會觸發 | 當前頁 |
| prev-click | 用戶點擊上一頁按鈕改變當前頁后觸發 改變時會觸發 | 當前頁 |
| next-click | 用戶點擊下一頁按鈕改變當前頁后觸發 | 當前頁 |
第一步，封裝組件，把需要的屬性提出來，
<template>
<div class="pagination">
<el-pagination
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
:page-sizes="pageSizesArr"
:total="total"
:current-page="currentPage"
:page-size="pageSize"
:layout="layout"
></el-pagination>
</div>
</template>
<script>
export default {
name: "Pagination",
props: {
// 總頁數
total: {
type: Number,
default: 0
},
// 當前頁
currentPage: {
type: Number,
default: 1
},
// 每頁顯示條數
pageSize: {
type: Number,
default: 10
},
pageSizesArr: {
type: Array,
default() {
return [10, 20, 30, 50];
}
},
layout: {
type: String,
default: "total, sizes, prev, pager, next, jumper"
}
},
data() {
return {
page: {
_pageSize: this.pageSize,
_currentPage: this.currentPage
}
};
},
methods: {
// 每頁查看條數變化
handleSizeChange(val) {
console.log(val);
this.page._pageSize = val;
this.$emit("pageChange", this.page);
},
// 當前頁碼變化
handleCurrentChange(val) {
this.page._currentPage = val;
this.$emit("pageChange", this.page);
}
}
};
</script>
<style scoped lang="scss">
.pagination {
margin: 20px 0;
}
</style>
呼叫
<Pagination :total="total" :pageNum="pageNum" :pageSize="pageSize" @pageChange="pageChange"/>
import Pagination from "@/components/Pagination/index";
components: {
Pagination
},
定義
data() {
return {
articleList: [],
pageSize: 10,
pageNum: 1,
total: 0
};
},
方法
pageChange(page) {
this.pageSize = page._pageSize;
this.pageNum = page._currentPage;
this.getData();
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/219820.html
標籤：其他
上一篇：openvn 安裝和配置