后端:
准备好查询实体与分页实体
1、分页工具实体
java
package com.ruoyi.dms.config;
import com.alibaba.nacos.api.model.v2.Result;
import lombok.Data;
import java.io.Serializable;
import java.util.List;
/**
* @author 宁兴星
* @description: 列表返回结果集
*/
@Data
public class PageResult<T> implements Serializable {
/**
* 总条数
*/
private long total;
/**
* 结果集合
*/
private List<T> list;
public PageResult() {
}
public PageResult(long total, List<T> list) {
this.total = total;
this.list = list;
}
public static <T> PageResult<T> toPageResult(long total, List<T> list){
return new PageResult(total , list);
}
public static <T> Result<PageResult<T>> toResult(long total, List<T> list){
return Result.success(PageResult.toPageResult(total,list));
}
}
2、列表请求对象实体:
java
package com.ruoyi.dms.domain.req;
import lombok.Data;
/**
* @author: 宁兴星
* Date: 2024/9/28 10:29
* Description:
*/
@Data
public class EquipmentCategoryRequest {
/**
* 设备类目名称
*/
private String equipmentCategoryName;
/**
* 是否启用
*/
private Integer status;
/**
* 分页参数
*/
private Integer pageNum;
/**
* 每页条数
*/
private Integer pageSize;
}
Controller
java
/**
* 设备类目管理列表
*/
@GetMapping("/ec/list")
public R<PageResult<EquipmentCategoryVo>> list(EquipmentCategoryRequest request){
PageResult<EquipmentCategoryVo> list = ecService.list(request);
return R.ok(list);
}
Service
java
PageResult<EquipmentCategoryVo> list(EquipmentCategoryRequest request);
ServiceImpl
java
@Override
public PageResult<EquipmentCategoryVo> list(EquipmentCategoryRequest request) {
// 分页
PageHelper.startPage(request.getPageNum(), request.getPageSize());
// 查询
List<EquipmentCategoryVo> list = ecMapper.list(request);
// 封装分页信息
PageInfo<EquipmentCategoryVo> pageInfo = new PageInfo<EquipmentCategoryVo>(list);
// 返回分页结果
return PageResult.toPageResult(pageInfo.getTotal(), pageInfo.getList());
}
Mapper
java
List<EquipmentCategoryVo> list(@Param("request") EquipmentCategoryRequest request);
前端:
前端使用实现分页vue2
链接: 饿了么UI
1、api/xxx/xxx.js 中
javascript
export function esList(equipmentCategoryRequest) {
return request({
url: '/dms/ec/list' ,
method: 'get',
params: equipmentCategoryRequest,
})
}
2、view/xxx/xxx.vue 中
javascript
<template>
<div>
<label for="category-name" style="margin-left: 20px">类目名称:</label>
<el-input
id="category-name"
type="text"
placeholder="请输入名称"
v-model="searchForm.equipmentCategoryName"
clearable
style="width: 200px;margin-bottom: 20px;margin-right: 10px "
/>
<label for="category-name">状态:</label>
<el-select v-model="searchForm.status" placeholder="请选择状态" style="width: 200px; margin-right: 10px" clearable>
<el-option label="停用" value="0"></el-option>
<el-option label="启用" value="1"></el-option>
</el-select>
<!-- 搜索按钮-->
<el-button @click="esList"
style="color: #1482f0"
class="el-icon-search"
>搜索</el-button>
<div class="block" style="margin-top: 10%;text-align: center;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="searchForm.pageNum"
:page-sizes="[3, 5, 10, 30]"
:page-size="searchForm.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</template>
........等
data() {
return {
searchForm: {
pageNum: 1,
pageSize: 3,
},
total: 0,
}
},
methods: {
//列表
esList(){
esList(this.searchForm).then(response => {
this.equipmentCaTableData = response.data.list;
this.total = response.data.total;
})
},
handleSizeChange(val) {
this.searchForm.pageSize = val;
this.esList();
},
handleCurrentChange(val) {
this.searchForm.pageNum = val;
this.esList();
},
},
效果: