vuejs之springboot+vue+element-ui之分页显示相关信息

发布时间：2020-12-16 23:02:43 所属栏目：百科来源：网络整理

导读：接： vue与springboot进行通讯：https://www.cnblogs.com/xiximayou/p/12336033.html vue与element-ui搭建后台管理页面：https://www.cnblogs.com/xiximayou/p/12336619.html 一、在后端中对返回的json数据进行分页处理 package com.gong.springbootvue.cont

接：

vue与springboot进行通讯：https://www.cnblogs.com/xiximayou/p/12336033.html

vue与element-ui搭建后台管理页面：https://www.cnblogs.com/xiximayou/p/12336619.html

一、在后端中对返回的json数据进行分页处理

package com.gong.springbootvue.controller;

import com.gong.springbootvue.entity.User;
 com.gong.springbootvue.repository.UserRepository;
 org.springframework.beans.factory.annotation.Autowired;
 org.springframework.data.domain.Page;
 org.springframework.data.domain.PageRequest;
 org.springframework.stereotype.Controller;
 org.springframework.web.bind.annotation.PathVariable;
 org.springframework.web.bind.annotation.RequestMapping;
 org.springframework.web.bind.annotation.ResponseBody;

 java.util.List;

@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    UserRepository userRepository;

    @ResponseBody
    @RequestMapping("/findAll/{page}/{size}")
    public Page<User> getAll(@PathVariable("page") Integer page,@PathVariable("size") Integer size) {
        System.out.println(page);
        System.out.println(size);
        PageRequest pageRequest = PageRequest.of(page,size);
        return userRepository.findAll(pageRequest);
    }

}

其中page表示从第几页开始，size表示每页显示几页。

运行之后：

二、在前端页面中接收并分页显示

（1）首先去element官网上找到表格样式和分页样式，然后进行修改，比如修改PageOne.vue

<template>
  div>
    el-table :data="tableData"
              border
              style="width: 100%">
      el-table-column fixed
                       prop="id"
                       label="编号"
                       width="150"</el-table-columnprop="username"="姓名"="120"="age"="年龄"="gender"="性别"="80"="email"="邮箱"="160 "="hobby"="爱好"="introduce"="介绍"="140"fixed="right"="操作">
        template slot-scope="scope">
          el-button @click="handleClick(scope.row)"
                     type="text"
                     size="small">查看el-buttontype>编辑el-tableel-pagination background
                   layout="prev,pager,next"
                   :page-size="pageSize"
                   :total="total"
                   @current-change="page"el-pagination>

script>
export default {
  methods: {
    handleClick (row) {
      console.log(row);
    },page (currentPage) {
      const that = this;
      axios.get('http://localhost:8181/user/findAll/' + (currentPage - 1) + '/3')
        .then(function (response) {
          console.log(response);
          that.tableData = response.data.content;
          that.pageSize = response.data.size;
          that.total = response.data.totalElements;
        })
    },},data () {
    return {
      pageSize: 0,total: 0,tableData: [],}
  },created () {
    const that = this;
    axios.get('http://localhost:8181/user/findAll/0/3')
      .then(function (response) {
        //console.log(response);
        that.tableData = response.data.content;
        that.pageSize = response.data.size;
        that.total = response.data.totalElements;
      })
  },}
>

created()方法在页面刷新时就会调用，此时将返回的数据绑定给tableData，同时将页数size赋给pageSize，将总记录数赋给total。

给el-pagination绑定一个current-change事件，该事件使用page方法。

最后效果：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!