<think>我们使用
Element UI作为前端框架，MyBatis
-Plus作为后端ORM框架来实现
分页功能。主要步骤包括：
1. 前端使用
Element UI的Pagination组件传递
分页参数（当前页码、每页条数）和查询条件（如果有）
2. 后端使用MyBatis
-Plus的
分页插件接收
分页参数，并构造
分页查询
3. 后端返回
分页数据（包括记录列表和总记录数）给前端
4. 前端渲染
分页数据和表格
具体步骤：
一、后端配置（Spring Boot
+ MyBatis
-Plus）
1. 添加MyBatis
-Plus
分页插件配置类（如果尚未配置）：
引用[2]中提供了配置类示例，我们创建一个配置类，配置
分页插件。
2. 在Service层实现
分页查询方法：
使用MyBatis
-Plus提供的`Page`对象和`QueryWrapper`来构建
分页查询条件。
二、前端配置（Vue
+ Element UI）
1. 在表格组件下方放置`el
-pagination`组件，并绑定相关事件和属性。
2. 在Vue组件的data中定义
分页参数（当前页、每页条数、总记录数）和查询条件。
3. 在methods中定义获取
分页数据的方法，通过API请求后端
数据。
三、前后端交互
前端通过API将
分页参数（当前页码、每页条数）和查询条件（如果有）传递给后端，后端返回
分页数据（记录列表和总记录数）。
下面我们详细说明每一步：
后端代码示例：
1. 配置
分页插件（参考引用[2]）：
```java
@Configuration
public class MybatisPlusConfig {
@Bean
public PaginationInterceptor paginationInterceptor() {
PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
// 设置请求的页面大于最大页后操作， true调回到首页，false 继续请求 默认false
// paginationInterceptor.setOverflow(false);
// 设置最大单页限制数量，默认 500 条，
-1 不受限制
// paginationInterceptor.setLimit(500);
// 开启 count 的 join 优化,只针对部分 left join
paginationInterceptor.setCountSqlParser(new JsqlParserCountOptimize(true));
return paginationInterceptor;
}
}
```
2. 在Service层实现
分页查询（参考引用[3]）：
```java
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
@Override
public Page<User> getPageByIdOrEmailOrAddress(Integer pageNum, Integer pageSize, String
uid, String username, String email) {
// 创建
分页对象，参数为当前页和每页条数
Page<User> page = new Page<>(pageNum, pageSize);
// 创建条件构造器
QueryWrapper<User> wrapper = new QueryWrapper<>();
if (StringUtils.isNotBlank(
uid)) {
wrapper.like("
uid",
uid);
}
if (StringUtils.isNotBlank(username)) {
wrapper.like("uname", username);
}
if (StringUtils.isNotBlank(email)) {
wrapper.like("email", email);
}
// 执行
分页查询
return userMapper.selectPage(page, wrapper);
}
}
```
注意：这里使用了`Page`和`QueryWrapper`，其中`Page`对象包含了
分页信息，查询后会将
分页结果（记录列表和总记录数）设置到该对象中。
3. Controller层接收请求并调用Service：
```java
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
@GetMapping("/page")
public Result<Page<User>> getUserPage(
@RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum,
@RequestParam(value = "pageSize", defaultValue = "10") Integer pageSize,
@RequestParam(value = "
uid", req
uired = false) String
uid,
@RequestParam(value = "username", req
uired = false) String username,
@RequestParam(value = "email", req
uired = false) String email) {
Page<User> page = userService.getPageByIdOrEmailOrAddress(pageNum, pageSize,
uid, username, email);
return Result.success(page);
}
}
```
前端代码示例（Vue
+ Element UI）：
1. 在表格和
分页组件的模板中：
```vue
<template>
<div>
<!
-- 搜索表单（可选）
-->
<el
-form :inline="true" :model="searchForm" class="
demo-form
-inline">
<el
-form
-item label="用户名">
<el
-input v
-model="searchForm.username" placeholder="用户名"></el
-input>
</el
-form
-item>
<el
-form
-item>
<el
-button type="primary" @click="onSearch">查询</el
-button>
</el
-form
-item>
</el
-form>
<!
-- 表格
-->
<el
-table :data="
tableData" style="width: 100%">
<el
-table-column prop="
uid" label="用户ID"></el
-table-column>
<el
-table-column prop="username" label="用户名"></el
-table-column>
<el
-table-column prop="email" label="邮箱"></el
-table-column>
</el
-table>
<!
-- 分页 -->
<el
-pagination
@size
-change="handleSizeChange"
@current
-change="handleCurrentChange"
:current
-page="currentPage"
:page
-sizes="[10, 20, 50, 100]"
:page
-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el
-pagination>
</div>
</template>
```
2. 在Vue组件的data和methods中：
```javascript
export default {
data() {
return {
tableData: [], // 表格
数据
currentPage: 1, // 当前页码
pageSize: 10, // 每页条数
total: 0, // 总记录数
searchForm: { // 查询条件
uid: '',
username: '',
email: ''
}
};
},
methods: {
// 获取
分页数据
getPageData() {
const params = {
pageNum: this.currentPage,
pageSize: this.pageSize,
...this.searchForm // 将查询条件一起传递
};
// 调用API
this.$http.get('/user/page', { params }).then(res => {
const result = res.data;
if (result.code === 200) {
this.
tableData = result.data.records; // 当前页记录
this.total = result.data.total; // 总记录数
}
});
},
// 每页条数改变
handleSizeChange(val) {
this.pageSize = val;
this.getPageData();
},
// 当前页码改变
handleCurrentChange(val) {
this.currentPage = val;
this.getPageData();
},
// 查询按钮
onSearch() {
this.currentPage = 1; // 重置为第一页
this.getPageData();
}
},
mounted() {
// 初始化第一页
数据
this.getPageData();
}
};
```
这样，我们就实现了基本的
分页功能。当用户改变页码、每页条数或者点击查询时，都会重新获取
数据并更新表格。
注意：以上代码是简化示例，实际项目中可能需要根据具体业务调整。
相关问题：
1. 如何优化MyBatis
-Plus的
分页查询性能？
2. 在
Element UI的
分页组件中，如何实现跳转到指定页码？
3. 如何在后端处理
分页查询时的排序需求？</think>以下是使用
Element UI 和 MyBatis
-Plus 实现
分页功能的完整业务逻辑步骤，结合前后端协同开发的最佳实践：
---
### 一、后端实现（Spring Boot
+ MyBatis
-Plus）
#### 1. 添加
分页插件配置
```java
@Configuration
public class MybatisPlusConfig {
@Bean
public PaginationInterceptor paginationInterceptor() {
PaginationInterceptor interceptor = new PaginationInterceptor();
// 设置最大单页限制（可选）
interceptor.setLimit(1000);
return interceptor;
}
}
```
[^2]
#### 2. Service层实现
分页查询
```java
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
@Override
public Page<User> getPage(int pageNum, int pageSize, String keyword) {
// 1. 创建
分页对象
Page<User> page = new Page<>(pageNum, pageSize);
// 2. 构建查询条件
QueryWrapper<User> wrapper = new QueryWrapper<>();
if (StringUtils.isNotBlank(keyword)) {
wrapper.like("name", keyword) // 字段名需与
数据库一致
.or().like("email", keyword);
}
wrapper.orderByDesc("create_time"); // 排序条件
// 3. 执行
分页查询
return userMapper.selectPage(page, wrapper);
}
}
```
[^3]
#### 3. Controller层返回
分页数据
```java
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
@GetMapping("/page")
public Result<Page<User>> getPage(
@RequestParam(defaultValue = "1") int pageNum,
@RequestParam(defaultValue = "10") int pageSize,
@RequestParam(req
uired = false) String keyword) {
Page<User> page = userService.getPage(pageNum, pageSize, keyword);
return Result.success(page); // 统一返回封装
}
}
```
---
### 二、前端实现（Vue
+ Element UI）
#### 1. 安装依赖
```bash
npm install
element-ui axios
```
#### 2.
分页组件与表格绑定
```vue
<template>
<div>
<!
-- 搜索框
-->
<el
-input v
-model="keyword" placeholder="输入关键词" @keyup.enter="loadData" />
<el
-button @click="loadData">搜索</el
-button>
<!
-- 数据表格
-->
<el
-table :data="
tableData" border>
<el
-table-column prop="id" label="ID" />
<el
-table-column prop="name" label="姓名" />
<el
-table-column prop="email" label="邮箱" />
</el
-table>
<!
-- 分页控件
-->
<el
-pagination
@size
-change="handleSizeChange"
@current
-change="handleCurrentChange"
:current
-page="currentPage"
:page
-sizes="[10, 20, 50]"
:page
-size="pageSize"
layout="total, sizes, prev, pager, next"
:total="total">
</el
-pagination>
</div>
</template>
```
#### 3. Vue逻辑实现
```javascript
export default {
data() {
return {
tableData: [], // 表格
数据
currentPage: 1, // 当前页码
pageSize: 10, // 每页条数
total: 0, // 总记录数
keyword: '' // 搜索关键词
};
},
mounted() {
this.loadData();
},
methods: {
// 加载
分页数据
async loadData() {
const params = {
pageNum: this.currentPage,
pageSize: this.pageSize,
keyword: this.keyword
};
const res = await this.$axios.get('/user/page', { params });
this.
tableData = res.data.records; // 当前页
数据
this.total = res.data.total; // 总记录数
},
// 每页条数变化
handleSizeChange(val) {
this.pageSize = val;
this.loadData();
},
// 页码变化
handleCurrentChange(val) {
this.currentPage = val;
this.loadData();
}
}
};
```
---
### 关键点说明
1. **
分页数据流**
```mermaid
graph LR
A[前端请求]
--> B[pageNum/pageSize/keyword]
B
--> C[Controller接收参数]
C
--> D[Service构建Page对象]
D
--> E[MyBatis
-Plus
分页查询]
E
--> F[返回Page<Entity>]
F
--> G[前端渲染表格]
```
2. **核心组件作用**
- **MyBatis
-Plus PaginationInterceptor**：自动拦截SQL添加`LIMIT`
分页语句
- **Page对象**：封装
分页参数和查询结果（含`records`
数据和`total`总数）
- **QueryWrapper**：动态构建查询条件（支持链式调用）
- **
Element UI Pagination**：通过`@size
-change`和`@current
-change`事件联动
数据加载
3. **性能优化建议**
- 避免`select *`，在QueryWrapper中使用`.select("id", "name")`指定字段
- 大
数据量时开启`count`优化：`paginationInterceptor.setCountSqlParser(...)`
- 前端添加防抖处理搜索请求（可使用lodash.debounce）
---
### 相关问题
1. 如何实现MyBatis
-Plus的多表联合
分页查询？
2.
Element UI分页组件如何实现跨页
数据选中状态保持？
3. 后端
分页接口设计时应考虑哪些安全防护措施？
4. MyBatis
-Plus的
分页原理与传统PageHelper有何区别？
5. 如何处理前端
分页参数传递时的类型验证问题？
> 以上实现基于MyBatis
-Plus 3.x和
Element UI 2.x版本，具体参数需根据实际业务调整。查询条件构建可参考[^3]，
分页配置详见[^2]，复杂SQL
分页可结合XML映射[^4]。
本文详细介绍了如何使用 Element UI 的表格组件进行数据展示和筛选操作，包括设置表格样式、加载状态提示、监听筛选事件以及后端数据获取等关键功能。通过具体实例，展示了如何利用 Vue.js 的响应式特性实现表格数据的动态加载和过滤。
扫一扫
4477
到【灌水乐园】发言
