使用element-plus组件在vue中引入分页功能

发布时间 2023-09-12 21:27:31作者: yesyes1

1、组件的引入

<el-pagination background layout="prev, pager, next"
                     page-size="6"
                     :total="60" >
      </el-pagination>

2、存在问题就是,现在页码并不能与每页的内容相互对应

解决方式:


page用来表示确认每一页是否点击到,正式版本会删除;

点击即有显示:

2、更改后端形式

controller:

package com.example.myspring001.controller;

import com.example.myspring001.entity.Student;
import com.example.myspring001.repository.StudentRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("/student")
public class StudentController {
    @Autowired
    private StudentRepository studentRepository;

    @GetMapping("/findAll/{page}/{size}")
    public Page<Student> findAll(@PathVariable("page") Integer page, @PathVariable("size") Integer size){
        Pageable pageable= PageRequest.of(page-1,size);
        return studentRepository.findAll(pageable);
    }
}

page--第几页;

size--每页的数量;

后台实现分页查询: