vue实现分页功能(BootStrap5.x + vue2.x)
0.前置知识
- SpringBoot基础
- Vue2.x 尚硅谷Vue视频前三十集内容
- BootStrap会看文档，懂点英文
1.需求实现
注意第一页的前一页功能为disabled
同理第四页的后一页功能为disabled
中间页
2.后端接口
假如我们拥有这样一个接口：
@GetMapping("patients/{pageNum}/{pageSize}")
public R getPatientsList(@PathVariable String pageNum,
@PathVariable String pageSize) {
int page_num = Integer.parseInt(pageNum);
int page_size = Integer.parseInt(pageSize);
PageInfo<PatientQueueInfo> list = patientService.getPatientQueueInfoList(page_num, page_size);
if (list.getList().isEmpty()) {
return R.error(404, "找不到您所查询的数据！");
}
return R.ok().put("data", list);
}
前端请求url为：
http://localhost:8080/test/patients/2/5
获得的json数据为：
{
"msg": "success",
"code": 200,
"data": {
"total": 20,
"list": [
{
"registerId": 14,
"patientId": 1044,
"name": "王冕",
"sex": "男",
"level": 0,
"planId": 1,
"queueId": 2,
"registerTime": "2021-09-30 14:33:51"
},
{...},
{...},
{...},
{...}
],
"pageNum": 2,
"pageSize": 5,
"size": 5,
"startRow": 6,
"endRow": 10,
"pages": 4,
"prePage": 1,
"nextPage": 3,
"isFirstPage": false,
"isLastPage": false,
"hasPreviousPage": true,
"hasNextPage": true,
"navigatePages": 8,
"navigatepageNums": [
1,
2,
3,
4
],
"navigateFirstPage": 1,
"navigateLastPage": 4
}
}
3.思路步骤
-
使用axios从后端获取数据，并记录关键变量的值
data: { page: { pageNum: 1, pageSize: 5, }, patientList: [], pageTotal: 1, rows: 1, // 当前条数 }, methods: { getPatients(i) { let _this = this; _this.page.pageNum = i || _this.page.pageNum; axios({ method:"get", url:`http://localhost:8080/test/patients/${_this.page.pageNum}/${_this.page.pageSize}`, }).then(res => { let result = res.data; let data = result.data; _this.patientList = data.list; _this.pageTotal = data.navigateLastPage; _this.rows = data.size; console.log(data); }).catch(err => { console.log(err); }); }, }, mounted() {//生命周期函数——钩子函数 this.getPatients(); } -
渲染列表
<table class="table table-striped"> <thead> <tr> <th scope="col">序号th> <th scope="col">用户idth> <th scope="col">姓名th> <th scope="col">性别th> <th scope="col">客户类型th> <th scope="col">套餐idth> tr> thead> <tbody> <tr v-for="(patient, index) in patientList" :key="patient.patientId"> <th scope="row">{{patientNo(index)}}th> <td>{{patient.patientId}}td> <td>{{patient.name}}td> <td>{{patient.sex}}td> <td>{{level[patient.level]}}td> <td>{{patient.planId}}td> tr> tbody> table> -
增加BootStrap分页样式
<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«span> a> li> <li class="page-item"><a class="page-link" href="#">1a>li> <li class="page-item"><a class="page-link" href="#">2a>li> <li class="page-item"><a class="page-link" href="#">3a>li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»span> a> li> ul> nav> -
实现跳转功能——复用之前的getPatients(i)函数，并为分页组件的当前页添加样式;编写函数实现前一页后一页功能，并为前一页后一页按钮添加判断与样式（超出index需要变为不可用的样式）
curPage(index) {
this.getPatients(index);
},
prePage() {
if (this.page.pageNum > 1) {
this.getPatients(--this.page.pageNum);
}
},
nextPage() {
if (this.page.pageNum < this.pageTotal) {
this.getPatients(++this.page.pageNum);
}
},
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li :class=" page.pageNum<=1?'disabled':'' " class="page-item" @click="prePage()">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«span>
a>
li>
<li class="page-item" :class=" page.pageNum===index?'active':'' " v-for="index in pageTotal"
@click="curPage(index)">
<a class="page-link">{{index}}a>
li>
<li :class=" page.pageNum>=pageTotal?'disabled':'' " class="page-item" @click="nextPage()">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»span>
a>
li>
ul>
nav>
- 计算属性的一些说明
computed: { // 计算属性 需要传入参数，返回函数的方式解决复杂页面计算 patientNo(){ return function (index) { return (this.page.pageNum - 1) * this.page.pageSize + index + 1; } }, },
4.完整前端代码
注意引入BootStrap。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>体检用户列表title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous">script>
<script src="./js/sidebars.js">script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/headers.css">
<link rel="stylesheet" href="./css/footers.css">
<link rel="stylesheet" href="./css/sidebars.css">
head>
<body>
<div id="vm">
<h2>体检患者列表h2>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">序号th>
<th scope="col">用户idth>
<th scope="col">姓名th>
<th scope="col">性别th>
<th scope="col">客户类型th>
<th scope="col">套餐idth>
tr>
thead>
<tbody>
<tr v-for="(patient, index) in patientList" :key="patient.patientId">
<th scope="row">{{patientNo(index)}}th>
<td>{{patient.patientId}}td>
<td>{{patient.name}}td>
<td>{{patient.sex}}td>
<td>{{level[patient.level]}}td>
<td>{{patient.planId}}td>
tr>
tbody>
table>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li :class=" page.pageNum<=1?'disabled':'' "
class="page-item"
@click="prePage()">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«span>
a>
li>
<li class="page-item" :class=" page.pageNum===index?'active':'' " v-for="index in pageTotal" @click="curPage(index)">
<a class="page-link">{{index}}a>
li>
<li :class=" page.pageNum>=pageTotal?'disabled':'' "
class="page-item"
@click="nextPage()">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»span>
a>
li>
ul>
nav>
div>
body>
html>
<script src="/js/vue.js">script>
<script src="/js/axios.min.js">script>
<script>
let app = new Vue({
el: "#vm",
data: {
page: {
pageNum: 1,
pageSize: 5,
},
level: ["普通客户", "vip客户"],
patientList: [],
pageTotal: 1,
rows: 1, // 当前条数
},
computed: { // 计算属性 需要传入参数，返回函数的方式解决复杂页面计算
patientNo(){
return function (index) {
return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
}
},
},
methods: {
getPatients(i) {
let _this = this;
_this.page.pageNum = i || _this.page.pageNum;
axios({
method:"get",
url:`http://localhost:8080/test/patients/${_this.page.pageNum}/${_this.page.pageSize}`,
}).then(res => {
let result = res.data;
let data = result.data;
_this.patientList = data.list;
_this.pageTotal = data.navigateLastPage;
_this.rows = data.size;
console.log(data);
}).catch(err => {
console.log(err);
});
},
curPage(index) {
this.getPatients(index);
},
prePage() {
if(this.page.pageNum > 1) {
this.getPatients(--this.page.pageNum);
}
},
nextPage() {
if(this.page.pageNum < this.pageTotal) {
this.getPatients(++this.page.pageNum);
}
},
},
mounted() {//生命周期函数——钩子函数
this.getPatients();
}
});
script>
5. 复盘
- 前端比较麻烦，但是并不难。
- 一些技巧性的知识可以积累。
- Vue程序员写的很爽。