本文介绍了如何在前端使用组件实现与后端通信的分页功能，包括设置当前页数、每页大小，以及处理页面跳转事件。通过`el-pagination`组件封装，展示了如何在调用组件时传递参数并接收后端返回的数据。
#重点：此次为后端分页的前端代码，可在调用的组件中添加所用到的接口，持续更新前端分页
#穿后端的包括当前页数以及每页多少，后端返的赋值的是总页数
1.首先组件封装，做部分修改
有总页数，前后页面，以及页面的跳转
<template>
<div class="wrapper">
<div class="block">
<span class="demonstration">全</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@prev-click="prevClick"
@next-click="nextClick"
:current-page.sync="currentPage4"
:page-sizes="pageSizes"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
>
</el-pagination>
</div>
</div>
</template>
<script>
export default {
props: {
pageSizes: {
type: Array,
default: () => [10, 100, 200, 300, 400],
},
pageSize: {
default: 10,
type: Number,
},
},
data() {
return {
currentPage1: 5,
currentPage2: 5,
currentPage3: 5,
currentPage4: 4,
};
},
created() {},
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.currentPage4 = 1;
this.$emit("pageSizeChanged", val);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.$emit("currentChanged", this.currentPage4);
},
prevClick() {},
nextClick() {},
},
};
</script>
<style lang="scss" scoped></style>
2.开始调用
<template>
<div>
<Pagination
@currentChanged="currentChanged"
@pageSizeChanged="pageSizeChanged"
></Pagination>
</div>
</template>
<script>
import Pagination from "./components/Pagination.vue";
export default {
components: {
Pagination,
},
data() {
return {
currentPage1: 5,
currentPage2: 5,
currentPage3: 5,
currentPage4: 4,
};
},
created() {},
methods: {
// handleSizeChange(val) {
// console.log(`每页 ${val} 条`);
// },
// handleCurrentChange(val) {
// console.log(`当前页: ${val}`);
// },
pageSizeChanged(vale) {
this.currentPage4 = 1;
console.log("pageSize", vale);
},
currentChanged(value) {
this.currentPage4 = value;
console.log("currentChanged", value);
},
},
};
</script>
<style lang="scss" scoped></style>
690
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
