RuoYi-Vue-Pro 文档

Appearance

2026-06-11
1291
6.4m

分页实现 ​

  • 前端：基于 Element UI 分页组件 Pagination
  • 后端：基于 MyBatis Plus 分页功能，二次封装 以 [系统管理 -> 租户管理 -> 租户列表] 菜单为例子，讲解它的分页 + 搜索的实现。

# 1. 前端分页实现 ​

# 1.1 Vue 界面 ​

界面 tenant/index.vue 相关的代码如下： 搜索 重置 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getList"/> import { getTenantPage } from "@/api/system/tenant"; export default { name: "Tenant", components: {}, data() { // 遮罩层 return { // 遮罩层 loading: true, // 显示搜索条件 showSearch: true, // 总条数 total: 0, // 租户列表 list: [], // 查询参数 queryParams: { pageNo: 1, pageSize: 10, // 搜索条件 name: null, contactName: null, contactMobile: null, status: undefined, }, } }, created() { this.getList(); }, methods: { /** 查询列表 / getList() { this.loading = true; // 处理查询参数 let params = {...this.queryParams}; // 执行查询 getTenantPage(params).then(response => { this.list = response.data.list; this.total = response.data.total; this.loading = false; }); }, /* 搜索按钮操作 / handleQuery() { this.queryParams.pageNo = 1; this.getList(); }, /* 重置按钮操作 */ resetQuery() { this.resetForm("queryForm"); this.handleQuery(); } } }

# 1.2 API 请求 ​

请求 system/tenant.js 相关的代码如下： import request from '@/utils/request' // 获得租户分页 export function getTenantPage(query) { return request({ url: '/system/tenant/page', method: 'get', params: query }) }

# 2. 后端分页实现 ​

# 2.1 Controller 接口 ​

在 TenantController 类中，定义 /admin-api/system/tenant/page 接口。代码如下： @Tag(name = "管理后台 - 租户") @RestController @RequestMapping("/system/tenant") public class TenantController { @Resource private TenantService tenantService; @GetMapping("/page") @Operation(summary = "获得租户分页") @PreAuthorize("@ss.hasPermission('system:tenant:query')") public CommonResult> getTenantPage(@Valid TenantPageReqVO pageVO) { PageResult pageResult = tenantService.getTenantPage(pageVO); return success(TenantConvert.INSTANCE.convertPage(pageResult)); } }

  • Request 分页请求，使用 TenantPageReqVO 类，它继承 PageParam 类
  • Response 分页结果，使用 PageResult 类，每一项是 TenantRespVO 类

# 2.1.1 分页参数 PageParam ​

分页请求，需要继承 PageParam 类。代码如下： @Schema(description="分页参数") @Data public class PageParam implements Serializable { private static final Integer PAGE_NO = 1; private static final Integer PAGE_SIZE = 10; @Schema(description = "页码，从 1 开始", required = true,example = "1") @NotNull(message = "页码不能为空") @Min(value = 1, message = "页码最小值为 1") private Integer pageNo = PAGE_NO; @Schema(description = "每页条数，最大值为 100", required = true, example = "10") @NotNull(message = "每页条数不能为空") @Min(value = 1, message = "每页条数最小值为 1") @Max(value = 100, message = "每页条数最大值为 100") private Integer pageSize = PAGE_SIZE; } 分页条件，在子类中进行定义。以 TenantPageReqVO 举例子，代码如下： @Schema(description = "管理后台 - 租户分页 Request VO") @Data @EqualsAndHashCode(callSuper = true) @ToString(callSuper = true) public class TenantPageReqVO extends PageParam { @Schema(description = "租户名", example = "芋道") private String name; @Schema(description = "联系人", example = "芋艿") private String contactName; @Schema(description = "联系手机", example = "15601691300") private String contactMobile; @Schema(description = "租户状态（0正常 1停用）", example = "1") private Integer status; @DateTimeFormat(pattern = FORMAT_YEAR_MONTH_DAY_HOUR_MINUTE_SECOND) @Schema(description = "创建时间") private LocalDateTime[] createTime; }

# 2.1.2 分页结果 PageResult ​

分页结果 PageResult 类，代码如下： @Schema(description = "分页结果") @Data public final class PageResult implements Serializable { @Schema(description = "数据", required = true) private List list; @Schema(description = "总量", required = true) private Long total; } 分页结果的数据 list 的每一项，通过自定义 VO 类，例如说 TenantRespVO 类。

# 2.2 Mapper 查询 ​

在 TenantMapper 类中，定义 selectPage 查询方法。代码如下： @Mapper public interface TenantMapper extends BaseMapperX { default PageResult selectPage(TenantPageReqVO reqVO) { return selectPage(reqVO, new LambdaQueryWrapperX() .likeIfPresent(TenantDO::getName, reqVO.getName()) // 如果 name 不为空，则进行 like 查询 .likeIfPresent(TenantDO::getContactName, reqVO.getContactName()) .likeIfPresent(TenantDO::getContactMobile, reqVO.getContactMobile()) .eqIfPresent(TenantDO::getStatus, reqVO.getStatus()) // 如果 status 不为空，则进行 = 查询 .betweenIfPresent(TenantDO::getCreateTime, reqVO.getBeginCreateTime(), reqVO.getEndCreateTime()) // 如果 create 不为空，则进行 between 查询 .orderByDesc(TenantDO::getId)); // 按照 id 倒序 } } 针对 MyBatis Plus 分页查询的二次分装，在 BaseMapperX 中实现，主要是将 MyBatis 的分页结果 IPage，转换成项目的分页结果 PageResult。代码如下图： BaseMapperX 实现

# 666. 社区优秀的想法 ​

最近更新