第1===》收集当前页码 和 每页显示条数
第2==》发送ajax请求页码 和 每页显示条数发送给后端
第3===》接收后端返回的数据总条数 total 和 当前页码的数据 data
第3===》如果当前页没有数据 且 排除第一页，防止出现删除当前页后出现页面没有数据
<div style="margin-top: 20px; text-align: left;"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[1, 3, 5, 10, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" ></el-pagination> </div>
// 数据 data() { return { currentPage: 1, // 当前页 total: 0, // 数据总条数 pageSize: 3 // 每页条数 }; },
methods:{ // 按照分页显示数据的函数 getAccountListByPage() { // 收集当前页码 和 每页显示条数 let pageSize = this.pageSize; let currentPage = this.currentPage; // 发送ajax请求 把分页数据发送给后端 this.axios .get("http://127.0.0.1:666/account/accountlistbypage", { params: { pageSize, currentPage } }) .then(response => { console.log("对应页码的数据:", response.data); // 接收后端返回的数据总条数 total 和 对应页码的数据 data let { total, data } = response.data; // 赋值给对应的变量即可 this.total = total; this.accountTableData = data; // 如果当前页没有数据 且 排除第一页 if (!data.length && this.currentPage !== 1) { // 页码减去 1 this.currentPage -= 1; // 再调用自己 this.getAccountListByPage(); } }) .catch(err => { console.log(err); }); }, // 每页显示条数改变 就会触发这个函数 handleSizeChange(val) { // 保存每页显示的条数 this.pageSize = val; // 调用分页函数 this.getAccountListByPage(); }, // 当前页码改变 就会触发这个函数 handleCurrentChange(val) { // 保存当前页码 this.currentPage = val; // 调用分页函数 this.getAccountListByPage(); }, }
后端用node写的代码 /* 按分页显示账号列表的路由 /accountlistbypage */ router.get("/accountlistbypage", (req, res) => { // 接收前端参数 let { pageSize, currentPage } = req.query; // 默认值 pageSize = pageSize ? pageSize : 3; currentPage = currentPage ? currentPage : 1; // 构造sql语句 （查询所有数据 按照时间排序） let sqlStr = `select * from account order by ctime desc`; // 执行sql语句 connection.query(sqlStr, (err, data) => { if (err) throw err; // 计算数据总条数 let total = data.length; // 分页条件 (跳过多少条) let n = (currentPage - 1) * pageSize; // 拼接分页的sql语句 sqlStr += ` limit ${n}, ${pageSize}`; // 执行sql语句 （查询对应页码的数据） connection.query(sqlStr, (err, data) => { if (err) throw err; // 把数据返回给前端 两个数据 数据总条数 total 和 对应页码的数据 data res.send({ total, data }); }); }); });
