vue实现消息列表按列表中某个值分组并展示

由于聊天消息是按照日期分组展示的，所以对于接收到的消息列表在展示之前必须先按照分组处理

处理函数如下：
使用forEach对messagelist遍历如果当前日期没有出现就创建新的分组，并把当前值设为分组名，该条消息压入分组，若已存在，直接压组

// 给消息列表分组
    groupMessage() {
      const list = {}
      // 按照日期对消息列表分组
      this.messagelist.forEach((e, i, arr) => {
        const data = e.data
        if (list[data]) {
          list[data].push(e)
        } else {
          list[data] = [e]
        }
      })
      this.list = list
    },

在展示分组后的消息列表时使用双重v-for，第一层先按照group名获取每个分组，再在分组里遍历分组元素

<div
      class="message_box"
      id="001"
      v-infinite-scroll="load"
      style="overflow:auto"
    >
      <div v-for="(group, data) in list" :key="data">
        <div class="timeTag">{{ data }}</div>
        <div
          v-for="(item, i) in group"
          :key="i"
          :class="item.isME == false ? 'left_message' : 'right_message'"
        >
          <el-avatar shape="square" :size="40" :src="item.portrait"></el-avatar>
          <!-- 判断是我发的消息还是对方发的 我的在右边显示 对方的在左边显示 -->
          <i
            :class="
              item.isME == false
                ? 'el-icon-caret-left lsj'
                : 'el-icon-caret-right rsj'
            "
            tyle=""
          ></i>
          <div class="text_box">
            {{ item.text }}
          </div>
          <!-- 判断消息的发送状态 失败显示红色标识 -->
          <i v-scroll :class="item.state == 0 ? 'el-icon-warning' : ''"></i>
        </div>
      </div>
    </div>

参考链接：https://blog.csdn.net/weixin_45595203/article/details/106472949