Vue3+Element plus+pageHelper实现分页-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3+Element plus+pageHelper实现分页。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

安装element plus

npm install element-plus --save

引入

修改main.js：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

后端

pom.xml:

<dependency>
	<groupId>com.github.pagehelper</groupId>
	<artifactId>pagehelper-spring-boot-starter</artifactId>
</dependency>

controller:

package com.xwj.page_helper.controller;

import com.github.pagehelper.PageInfo;
import com.xwj.page_helper.entity.Category;
import com.xwj.page_helper.service.CategoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * @Description 欢迎页
 * @Author yuki
 * @Date 2023/8/8 17:08
 * @Version 1.0
 **/
@RestController
@RequestMapping("category")
public class CategoryController {
    @Autowired
    CategoryService categoryService;
    @GetMapping("/getPage")
    public PageInfo<Category> getPage(@RequestParam Integer pageNum, @RequestParam Integer pageSize){
        return categoryService.getPage(pageNum, pageSize);
    }
}

service:

package com.xwj.page_helper.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.xwj.page_helper.entity.Category;
import com.xwj.page_helper.mapper.CategoryMapper;
import com.xwj.page_helper.service.CategoryService;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @Description TODO
 * @Author yuki
 * @Date 2023/8/10 14:30
 * @Version 1.0
 **/
@Service
public class CategoryServiceImpl extends ServiceImpl<CategoryMapper, Category> implements CategoryService {
   
    @Override
    public PageInfo<Category> getPage(int pageNum, int pageSize) {
        PageHelper.startPage(pageNum, pageSize);
        List<Category> categories = baseMapper.selectAll();
        PageInfo<Category> pageInfo = new PageInfo<>(categories);
        return pageInfo;
    }
}

前端

vue：文章来源地址https://www.toymoban.com/news/detail-642463.html

<template>
  <el-table :data="tableData.list" style="width: 100%">
    <el-table-column prop="id" label="id" width="180" />
    <el-table-column prop="name" label="name" width="180" />
    <el-table-column prop="parentId" label="parentId" />
    <el-table-column prop="isParent" label="isParent" />
    <el-table-column prop="sort" label="sort" />
  </el-table>
  <div class="example-pagination-block">
    <el-pagination layout="prev, pager, next" :total="parseInt(pageInfo.total)"  @size-change="handleSizeChange"
      @current-change="handleCurrentChange"/>
  </div>
</template>

<script setup>
import axios from 'axios'
import { onMounted,reactive } from 'vue';

// 注意reactive可能遇到响应失效的情况，可使用ref([]) https://blog.csdn.net/m0_57033755/article/details/129043116
const tableData = reactive({
  list: []
})
const pageInfo = reactive({
  currentPage: 1,
  pageSize: 5,
  total: undefined
})

function handleSizeChange(val){
  getData(val, pageInfo.pageSize)
}
function handleCurrentChange(val){
  getData(val, pageInfo.pageSize)
}
function getData(currentPage, pageSize){
  axios({
      method: 'GET',
      url: '/local/page-helper/category/getPage',
      params: {'pageNum': currentPage, 'pageSize': pageSize}
  }).then(function(res){
      pageInfo.total = res.data.total
      tableData.list = res.data.list
  })
}

onMounted(() => {
  getData(1,5)
})
</script>