问题-JZTXT

用antd做个论坛， a-list做每个用户发送的动态，a-comment组件做每个用户发的动态的评论区，

理想状态是每个用户发的动态和评论区应该是绑定在一起的，但是我新增一条数据后，之前的第一条动态会向下位移，但是评论区没有向下位移

代码

动态区代码

<template>
  <a-list :data-source="msgData">
    <a-card
      style="background-color:#ffffff;border: 1px solid #e8e8e8;border-radius:4px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1)"
      v-show="noNext" slot="footer"><b>已经到底了</b></a-card>

    <div
      slot="loadMore"
      :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
    ></div>

    <a-list-item
      v-for="(item, index) in msgData"
      :key="item.id"
      slot="renderItem"
      slot-scope="item, index"
      class="ant-list-item-no-flex"
    >

      <a-list-item-meta>
        <div slot="title">
          <span>
              {{ item.userName }}
          </span>
          <span style="float: right">
            <a-dropdown placement="bottomRight">
              <a-icon type="ellipsis" />
              <a-menu slot="overlay">
                <a-menu-item>
                  <a @click="delMsg(item.id)">删除</a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </span>
        </div>
        <a-avatar
          slot="avatar"
          :src="item.avatar"
        />
      </a-list-item-meta>

      <div id="content_div">{{ item.content }}</div>

      <div>
        <BbsHotImage :msg-images="item.images" />
      </div>

      <div style="display: flex; justify-content: space-between; margin-top: 15px;"></div>

      <div>
        <hot-list-item-actions class="topic_message_like" :showMessage="item.showMessage" :sourceId="item.id"
                               :actions="actions" />
      </div>
    </a-list-item>
  </a-list>
</template>

<script>

import BbsHotImage from '@comp/bbs/hot/BbsHotImage'
import HotListItemActions from '@comp/bbs/comment/HotListItemActions'
import { msgList, delMsg } from '@api/bbsService'

// 热门列表展示组件
export default {
  components: {
    BbsHotImage, HotListItemActions
  },
  data() {
    return {
      msgData: [],
      noNext: false,
      param: {
        pageNo: 1,
        pageSize: 10
      },
      actions: [
        { type: 'like-o', text: '130' },
        { type: 'star-o', text: '156' },
        { type: 'message', text: '2' }
      ]
    }
  },
  methods: {
    delMsg(record) {
      delMsg({ 'id': record }).then(res => {
        console.log(res)
        if (res.success) {
          this.msgData = this.msgData.filter(item => item.id !== record)
        }
      })
    },
    addMsg(msgRes) {
      if (msgRes.picList) {
        msgRes.images = msgRes.picList.split(',').map(item => window._CONFIG['bbsURL'] + item)
      } else {
        msgRes.images = []
      }
      msgRes.showMessage = false
      this.msgData.unshift(msgRes)
      console.log(this.msgData)
    },
    refreshHotList() {
      let param = { pageNo: 1, pageSize: 10 }
      msgList(param).then(res => {
        if (res.success) {
          let tempData = []
          for (let record of res.result.records) {
            let temp = {
              userName: '',
              content: '',
              avatar: '',
              images: [],
              id: '',
              showMessage: false
            }
            temp.content = record.content
            if (record.picList) {
              temp.images = record.picList.split(',').map(item => window._CONFIG['bbsURL'] + item)
            }
            temp.userName = record.realname
            temp.avatar = record.avatar
            temp.id = record.id
            tempData.push(temp)
          }
          this.msgData = tempData
          // 将新数据添加到旧数据之前
          // this.msgData = [...tempData, ...this.msgData]
          console.log('msgData', this.msgData)
          this.param.pageNo = res.result.current
        }
      })
    },
    refreshListAfterPageDown() {
      this.param.pageNo++
      console.log('hot page +1', this.param.pageNo)
      msgList(this.param).then(res => {
        if (res.success && res.message == 'hasNext') {
          console.log('hasNext', res)
          for (let record of res.result.records) {
            let temp = {
              userName: '',
              content: '',
              avatar: '',
              images: [],
              id: '',
              showMessage: false
            }
            temp.content = record.content
            if (record.picList) {
              temp.images = record.picList.split(',').map(item => 'http://localhost:28080/api/sys/common/static/' + item)
            }
            temp.userName = record.realname
            temp.avatar = record.avatar
            temp.id = record.id
            this.msgData.push(temp)
          }
        }

        if (res.success && res.message == 'noNext') {
          console.log('noNext', res)
          this.noNext = true
          this.param.pageNo--
          this.$message.success('没有更多了')
        }
      })
    }
  },
  created() {
    this.refreshHotList()
  }
}
</script>

<style scoped>

/*.topic_message_like {*/
/*  margin-left: 45px;*/
/*  margin-right: 45px;*/
/*  display: flex;*/
/*  justify-content: space-between;*/
/*  align-items: center;*/
/*  color: rgba(0, 0, 0, .45098039215686275);*/
/*  margin-top: 10px;*/
/*}*/

#content_div {
  width: 100%;
  margin-left: 45px;
  /*margin-top: 10px; !* 可以根据实际效果调整 *!*/
}

.ant-list-item-meta {
  margin-bottom: 0 !important; /* override the default style */
}

/* 添加边框和内边距来分隔列表项 */
.ant-list-item-no-flex {
  background-color: #ffffff;
  border: 1px solid #e8e8e8; /* 添加边框 */
  border-radius: 4px; /* 边框圆角 */
  margin-bottom: 10px; /* 添加与下一个列表项的间距 */
  padding: 16px; /* 内边距 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加轻微的阴影 */

  /*display: block;*/
  /*flex-direction: column;*/
  /*justify-content: flex-start;*/
}
</style>

评论区代码

<template>
  <div>
    <div class="control-group">
      <span class="icon-span">
        <a-icon type="star-o" /> 156
      </span>

      <span class="icon-span">
        <!--        显示评论区-->
        <a-icon type="message" @click="sendShowMessage" />2
      </span>

      <span class="icon-span">
        <a-icon type="like-o" />130
      </span>
    </div>

    <div style="width: 90%;margin: 0 auto" v-if="localShowMessage">
      <hr class="hr-with-arrow" />
      <!--      发布评论-->
      <comment-editor add-type="root" :sourceId="sourceId" />
      <br />
      <div>
        <a-radio-group default-value="new" size="small" @change="showCommentByType">
          <a-radio-button value="new">
            最新
          </a-radio-button>
          <a-radio-button value="hot">
            最热
          </a-radio-button>
        </a-radio-group>
      </div>
      <br />
      <comment-list :commentList="commonList"></comment-list>
    </div>
  </div>
</template>

<script>

import CommentEditor from '@comp/bbs/comment/CommentEditor'
import CommentList from '@comp/bbs/comment/CommentList'
import moment from 'moment'
import { commentList } from '@api/bbsService'

export default {
  name: 'HotListItemActions',
  components: {
    CommentEditor, CommentList
  },
  props: {
    actions: {
      type: Array,
      default: () => []
    },
    sourceId: {
      type: String
    },
    showMessage: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      commonList: [],
      localShowMessage: this.showMessage,
    }
  },
  methods: {
    showCommentByType(e) {
      // todo 分类展示评论
      console.log(this.sourceId, '==', e.target.value)
    },
    sendShowMessage() {
      console.log(this.sourceId)
      this.localShowMessage = !this.localShowMessage
      if (this.localShowMessage) {
        let param = {
          type: 'msg',
          id: this.sourceId
        }
        commentList(param).then(res => {
          for (let record of res.result.records) {
            let commentIn = {
              id: '',
              userId: '',
              sourceType: 'msg',
              sourceId: '',
              ctime: null,
              ctimeTitle: null,
              realname: '',
              avatar: '',
              commentContent: '',
              commentReplyList: []
            }
            commentIn = record
            commentIn.sourceId = this.sourceId
            commentIn.ctimeTitle = moment(record.createTime).format('YYYY-MM-DD HH:mm:ss')
            commentIn.ctime = moment(record.createTime).fromNow()
            this.commonList.push(commentIn)
          }
        })
      } else {
        this.commonList = []
      }
    }
  }
}
</script>

<style scoped>
.control-group {
  margin-left: 45px;
  margin-right: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(0, 0, 0, .45098039215686275);
  margin-top: 10px;
}

.hr-with-arrow {
  position: relative; /* 使得伪元素能够正确定位 */
  overflow: visible; /* 确保箭头可以显示在hr标签的范围之外 */
  border: none; /* 移除默认的边框 */
  height: 1px; /* 设置hr的高度 */
  background-color: #e8e8e8; /* 设置hr的背景色 */
}
</style>