网站建设金app营销推广方案

Vue分页组件的简单使用流程

支持两种模式
1.isBackPage为 true 时,返回的为页码 如pageIndex为1,pageSize为15
2.isBackPage为 false 时,返回的为limit范围 如pageIndex为0,pageSize为15,适用于直接Sql语句调用, 如select * from xxxx limit 0,15

1.分页组件代码

<!-- 分页公用组件 -->
<template><div class="pagination"><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="paginations.page_index" :page-sizes="paginations.page_sizes" :page-size="paginations.page_size" :layout="paginations.layout" :total="paginations.total"></el-pagination></div>
</template><script>
export default {components: {},props: {isBackPage:{type: Boolean, default: false},//两种模式 true:返回页码 false:返回limit范围 如0,5  5,5  10,5pageDataTotal: { type: Number, default: 0 }},data() {return {paginations: {page_index: 1, //当前页total: 0, //总数page_size: 15, //一页显示多少page_sizes: [5, 10, 15, 20, 30, 100, 200, 300], //每页显示多少条layout: "total, sizes, prev, pager, next, jumper"}};},mounted: function() {this.setPaginations();},methods: {setPaginations() {this.paginations.total = parseInt(this.pageDataTotal); //数据的数量this.paginations.page_index = this.paginations.page_index; //默认显示第一页this.paginations.page_size = this.paginations.page_size; //每页显示多少数据},handleSizeChange(page_size) {this.paginations.page_index = 1; //第一页this.paginations.page_size = page_size; //每页先显示多少数据let pageIndex=0;if(this.isBackPage){pageIndex=1;}else{pageIndex=0;}this.$emit("paginationData", {pageDataTotal: this.pageDataTotal,pageIndex: pageIndex,pageSize: page_size});},handleCurrentChange(page) {let index=0;this.paginations.page_index=page;//代表从多少数据开始if(this.isBackPage){index=page;}else{index = this.paginations.page_size * (page - 1);}//每页显示多少数据let pageSize = this.paginations.page_size;this.$emit("paginationData", {pageDataTotal: this.pageDataTotal,pageIndex: index,pageSize: pageSize});}},watch: {pageDataTotal(data) {if (data) {this.paginations.total = parseInt(data);this.setPaginations();}}}
};
</script><style lang="scss">
.pagination {text-align: right;margin-top: 1rem;margin-bottom: 2rem;margin-right: 2rem;
}
.pagination .el-input .el-input__inner {height: 26px !important;
}
.pagination .el-select {height: 26px !important;
}
</style>

2.引入该组件并调用

<Pagination :pageDataTotal="paginationObject.pageDataTotal" @paginationData="paginationData"></Pagination>

3. data()中初始化数据

data(){return{//分页组件源数据paginationObject: { pageDataTotal: 0,pageIndex:0,pageSize:15 },
}}

4.methods中创建接收方法

methods:{/**分页数据* */paginationData(data) {this.paginationObject.pageIndex = data.pageIndex;this.paginationObject.pageSize= data.pageSize;//在这里调用获取数据的方法//this.getxxxx();}
}