使用分页组件前先明确几个问题
1、分页组件只是一个组件，肯定不是直接加进去就能用。
2、分页分为前端分页和后端分页，一般都是用后端分页，也就是一次查询一页数据
3、分页组件根据总记录条数和每页记录条数自动分页
清楚这几个问题，问题就迎刃而解了
看代码，这里使用的是element-plus的分页
<template>
<div class="container">
<el-table :data="tableData" border>
<el-table-column prop="c_id" label="ID" width="90" />
<el-table-column prop="c_name" label="名称" width="85" />
<el-table-column prop="c_num" label="剩余数量" width="110" />
<el-table-column prop="c_price" label="价格" width="80" />
<el-table-column prop="c_total" label="数量" width="90" />
<el-table-column prop="c_type" label="类型" width="90" />
<el-table-column prop="shop_id" label="店铺ID" width="90" />
<el-table-column prop="c_icon" label="商品图片" width="100" />
</el-table>
<!-- page-sizes 每页显示个数选择器的选项设置 -->
<!-- page-size 每页显示条目个数，支持 .sync 修饰符 -->
<!-- currentPage 刚进入时是第几页（刷新后是第几页）-->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="currentPage" :page-sizes="pagesizes" :page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper" v-model:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
],
currentPage: 1,//现在是第几页
pagesizes: [5, 10, 15],
pagesize: 5,//现在一页有几条
total: 28,//分页组件根据一共有多少条自动分页，所以这个总条数可以直接请求拿到
}
},
methods: {
handleSizeChange(val = 5) {
//pageSize 改变时会触发
//回调参数 每页条数
// this.num = val;
this.pagesize = val;
console.log(`每页 ${val} 条`);
//当改变每页条数的时候，回到第一页重新开始
this.currentPage=1;
// this.page=1;
this.request(val,1);
},
handleCurrentChange(val = 1) {
//currentPage 改变时会触发 点击上一页和下一页时触发
//回调参数 当前页
this.currentPage = val;
console.log(`当前页: ${val}`);
this.request(this.pagesize,val);
},
request(num,page)//参数：在每页多少条的情况下，需要第几页的数据
{
console.log(num,page)
this.$axios({
methods: "post",
url: `http://localhost/allphpcode/elementpaginationdemo/response.php?num=${num}&page=${page}`,
}).then((res) => {
console.log(res)
this.tableData = res.data.data;
}).catch((error) => {
console.log(error);
})
}
},
created() {
// this.handleCurrentChange();
// this.handleSizeChange();
//主要根据当前第几页，每页多少条来向后端发起请求获得相应的数据
this.request(5,1);
},
}
</script>
<style lang="scss" scoped>
.container {
padding: 0 200px;
}
</style>
首先是有一个表格，表格的数据来自tableData，表格下面就是分页；
@size-change是pagesize改变时触发的事件，参数的值就是每页多少条；
@current-change是currentPage改变时会触发的事件，也就是点击上一页或者下一页时，参数的值就是当前第几页；
再后面就是把三个属性绑定给相应的值，total是数据库里这张表的总条数，分页组件就是据此自动分页；
layout是组件布局，显示总条数、每页几条的选择器、上一页、当前页、下一页、跳转到第几页
之后js部分有三个函数，
handleSizeChange是pageSize改变时会触发、回调参数是每页条数；
handleCurrentChange是currentPage改变时会触发、点击上一页和下一页时触发、回调参数是当前页；
request是向后端请求表格数据，一次请求一页的表格数据，把请求到的数据赋给tableData，函数的参数是在每页多少条的情况下，需要第几页的数据；created时直接调用了request
后端代码就是一个简单的查询，DB::getInstance()->connect()是一个pdo对象
<?php
require_once './DB.php';
// 跨域问题处理
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE");
header('Access-Control-Allow-Headers:x-requested-with,content-type');
$num = $_REQUEST['num'];
$page = $_REQUEST['page'];
$sql = "select * from commodity where c_id > $num*($page-1) and c_id <= $num*$page";
// echo $sql;
$stmt = DB::getInstance()->connect()->query($sql);
$commodity = $stmt->fetchAll();
$msg = array(
"code" => "",
"data" => $commodity,
"message" => ""
);
if (empty($commodity)) {
$msg['code'] = 404;
$msg['message'] = "查找失败";
} else {
$msg['code'] = 1001;
$msg['message'] = "查找成功";
}
exit(json_encode($msg));
所以整个流程就是：created时调用请求函数，获取到第一页数据（根据每页多少条、当前第几页）---->分页组件根据相应的参数（数据总条数、刚进入是显示到第几页、显示哪些按钮）加载----->点击上一页或下一页按钮时根据当前第几页获取数据---->改变每页显示条数时，回到第一页，根据当前第一页、每页显示多少条请求数据。
还有就是直接点击页码可以直接跳转到相应的页，Go to也是可以的，这个内部封装好了。
就是这么简单 🤪
