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 {@AutowiredCategoryService 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 {@Overridepublic 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：

<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.totaltableData.list = res.data.list})
}onMounted(() => {getData(1,5)
})
</script>