自己的项目想要搞一个分页加载回复4条为1页,
评论的内容渲染好了,
结果遇到分页加载混乱,好像是现在只加载了第一层子回复,还莫名其妙的加载了好多次。
有没有人知道怎么做?
评论及回复加载方式是树形结构,单表
- 数据结构:
/**
* ID
*/
private Integer id;
/**
* 评论内容
*/
private String content;
/**
* 评论时间
*/
private String time;
/**
* 分类ID
*/
private Integer typeId;
/**
* 民宿ID
*/
private Integer HomestayId;
private Integer userId;
private Integer parentId;
private String role;
/**
* 所属分类
*/
private String typeName;
/**
* 所属民宿
*/
private String homestayName;
/**
* 用户昵称
*/
private String userName;
/**
* 头像
*/
private String avatar;
/**
* 子节点
*/
private List<Comment> children;
- 评论的子回复结构
{
"id": 38,
"content": "11",
"time": "2024-03-14 09:49:08",
"typeId": 24,
"userId": 17,
"parentId": 0,
"role": "USER",
"typeName": null,
"homestayName": null,
"userName": "老六",
"avatar": "http://localhost:9090/files/1709136644473-laoliu.webp",
"children": [
{
"id": 39,
"content": "222",
"time": "2024-03-14 11:14:33",
"typeId": 24,
"userId": 18,
"parentId": 38,
"role": "USER",
"typeName": null,
"homestayName": null,
"userName": "灰大王",
"avatar": "http://localhost:9090/files/1709136959637-huidawang.jpg",
"children": [
{
"id": 45,
"content": "333",
"time": "2024-03-14 17:49:43",
"typeId": 24,
"userId": 17,
"parentId": 39,
"role": "USER",
"typeName": null,
"homestayName": null,
"userName": "老六 回复 @灰大王",
"avatar": "http://localhost:9090/files/1709136644473-laoliu.webp",
"children": [
{
"id": 47,
"content": "444",
"time": "2024-03-14 21:45:00",
"typeId": 24,
"userId": 17,
"parentId": 45,
"role": "USER",
"typeName": null,
"homestayName": null,
"userName": "老六 回复 @老六",
"avatar": "http://localhost:9090/files/1709136644473-laoliu.webp",
"children": [
{
"id": 52,
"content": "555",
"time": "2024-03-15 13:25:43",
"typeId": 24,
"userId": 17,
"parentId": 47,
"role": "HOMESTAY",
"typeName": null,
"homestayName": null,
"userName": "民宿房东(田心村店) 回复 @老六",
"avatar": "http://localhost:9090/files/1709135179260-民宿房东(田心村店).jpg",
"children": [
{
"id": 56,
"content": "888",
"time": "2024-03-15 13:45:55",
"typeId": 24,
"userId": 17,
"parentId": 52,
"role": "USER",
"typeName": null,
"homestayName": null,
"userName": "老六 回复 @民宿房东(田心村店)",
"avatar": "http://localhost:9090/files/1709136644473-laoliu.webp",
"children": null,
"homestayId": 17
}
],
"homestayId": 17
}
],
"homestayId": 17
}
],
"homestayId": 17
},
{
"id": 54,
"content": "666",
"time": "2024-03-15 13:42:41",
"typeId": 24,
"userId": 17,
"parentId": 39,
"role": "USER",
"typeName": null,
"homestayName": null,
"userName": "老六 回复 @灰大王",
"avatar": "http://localhost:9090/files/1709136644473-laoliu.webp",
"children": null,
"homestayId": 17
}
],
"homestayId": 17
},
{
"id": 55,
"content": "777",
"time": "2024-03-15 13:43:18",
"typeId": 24,
"userId": 17,
"parentId": 38,
"role": "HOMESTAY",
"typeName": null,
"homestayName": null,
"userName": "民宿房东(田心村店)",
"avatar": "http://localhost:9090/files/1709135179260-民宿房东(田心村店).jpg",
"children": null,
"homestayId": 17
}
],
"homestayId": 17,
"replyCount": 7,
"replyPageNum": 1,
"replyPageSize": 4
}
- 计算分页的代码
<el-col :span="22">
<!-- 递归回复的回复 -->
<div v-if="item.children && item.children.length > 0">
<!-- 根据分页渲染评论回复列表 -->
<div v-for="reply in paginatedReplies" :key="reply.id">
<CommentItem
:user="user"
:commentData="item.children"
@openReplyDialog="openReplyDialog"
@del="del"
></CommentItem>
</div>
</div>
<!-- 评论回复分页 -->
<el-pagination
v-if="item.children && item.children.length > 0"
@current-change="handleReplyPageChange(item.id, $event)"
:current-page="item.replyPageNum"
:page-sizes="[5, 10, 20]"
:page-size="item.replyPageSize"
layout="total, prev, pager, next"
:total="item.replyCount"
></el-pagination>
</el-col>
calculatePaginatedReplies() {
this.paginatedReplies = [];
this.commentData.forEach(comment => {
console.log("Processing comment:", comment);
// 处理有回复的评论
if (comment.children && comment.children.length > 0) {
console.log("comment has children:", comment.children);
// 计算分页的起始索引和结束索引
const startIndex = (comment.replyPageNum - 1) * comment.replyPageSize;
const endIndex = startIndex + comment.replyPageSize;
// 切割出当前评论需要显示的回复
const slicedChildren = comment.children.slice(startIndex, endIndex);
console.log("Sliced children:", slicedChildren); // 添加调试语句
// 将切割出的回复添加到分页回复数组中
this.paginatedReplies = this.paginatedReplies.concat(slicedChildren);
console.log("Paginated replies:", this.paginatedReplies); // 添加调试语句
}
});
},