在 vue 項目中的 components 中 創建一個 文件夾，文件夾里創建一個 name（這個名字你隨意取）.vue
<template>
<div class="page">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="page.currentPage"
:page-size="10"
layout="total, prev, pager, next"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
props: ["total","currentPage"],
data() {
return {
// 頁碼參數
page: {
currentPage: 1,
pageSize: 10,
},
};
},
methods: {
handleSizeChange(val) {
this.page.pageSize = val;
this.$emit("pageChange", this.page);
},
handleCurrentChange(val) {
this.page.currentPage = val;
this.$emit("pageChange", this.page);
},
},
watch:{ // 監聽功能：用來監聽分頁的第幾頁發生的變化
currentPage(val,old){
// console.log(val,old)
this.page.currentPage=val
}
}
};
</script>
// 在你需要用到這個分頁的 vue 文件里進行引用
script
import Page from "../文件夾名字/文件名字" // 自行引用，這個是我的文件路徑，別復制進去。
components: {
page: Page
},
data數據：
//分頁
page_total: '', //總數
page_index: 1, //頁碼
page_size: 10, //每頁展示條數，需要的可以自己寫上去，我這里並不需要
template
<div class="sellPage" v-if="sellPage_total > 10">
<page :total="sellPage_total" :currentPage="sellPage_index" @pageChange="SellPageChange"></page>
</div>
methods：
SellPageChange（）{
this.sellPage_index = item.currentPage; //頁碼
}