vuejs之springboot+vue+element-ui之分頁顯示相關信息

接：

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;
import com.gong.springbootvue.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import 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-column>
      <el-table-column prop="username"
                       label="姓名"
                       width="120">
      </el-table-column>
      <el-table-column prop="age"
                       label="年齡"
                       width="120">
      </el-table-column>
      <el-table-column prop="gender"
                       label="性別"
                       width="80">
      </el-table-column>
      <el-table-column prop="email"
                       label="郵箱"
                       width="160 ">
      </el-table-column>
      <el-table-column prop="hobby"
                       label="愛好"
                       width="120">
      </el-table-column>
      <el-table-column prop="introduce"
                       label="介紹"
                       width="140">
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       width="120">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)"
                     type="text"
                     size="small">查看</el-button>
          <el-button type="text"
                     size="small">編輯</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background
                   layout="prev, pager, next"
                   :page-size="pageSize"
                   :total="total"
                   @current-change="page">
    </el-pagination>
  </div>

</template>

<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;
      })
  },
}
</script>

created()方法在頁面刷新時就會調用，此時將返回的數據綁定給tableData，同時將頁數size賦給pageSize，將總記錄數賦給total。

給el-pagination綁定一個current-change事件，該事件使用page方法。

最后效果：