vue项目遇到二级回复渲染混乱怎么解决，弄不会，求救大佬

自己的项目想要搞一个分页加载回复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); // 添加调试语句
        }
      });
    },