vue实现分页功能(BootStrap5.x + vue2.x)

• SpringBoot基础
• Vue2.x 尚硅谷Vue视频前三十集内容
• BootStrap会看文档，懂点英文

注意第一页的前一页功能为disabled

同理第四页的后一页功能为disabled

中间页

假如我们拥有这样一个接口：

    @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 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
    }
}

1. 使用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();
        }
   

2. 渲染列表

    
   
            
   
            
   
                
   序号
                
   用户id
                
   姓名
                
   性别
                
   客户类型
                
   套餐id
            
            
            
   
            
   
                
   {{patientNo(index)}}
    
                
   {{patient.patientId}}
                
   {{patient.name}}
                
   {{patient.sex}}
                
   {{level[patient.level]}}
                
   {{patient.planId}}
            
            
        
   

3. 增加BootStrap分页样式

4. 实现跳转功能——复用之前的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);
    }
},

5. 计算属性的一些说明

    computed: { // 计算属性 需要传入参数，返回函数的方式解决复杂页面计算
            patientNo(){
              return function (index) {
                  return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
              }
            },
        },
   

注意引入BootStrap。

    
    
    
    
    
    
    
    
    



    

        
体检患者列表
        

            

            

                
序号
                
用户id
                
姓名
                
性别
                
客户类型
                
套餐id
            
            
            

            

                
{{patientNo(index)}}
                
{{patient.patientId}}
                
{{patient.name}}
                
{{patient.sex}}
                
{{level[patient.level]}}
                
{{patient.planId}}
            
            
        
        

    

1. 前端比较麻烦，但是并不难。
2. 一些技巧性的知识可以积累。
3. Vue程序员写的很爽。