在 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; //页码
}