将平铺数组中某个属性相同的数据转化为相同key的对象，并循环渲染

需求：某个数组中包含多个年份的数据，需要将同一年的数据分组渲染

效果图：

原数组结构：

目标结构：将2023年的数据以2023为key，全部的2023年数据为value进行重组

操作步骤：

   const noticeInfo = ref({}) //准备一个空对象
   假设 noticeList 为原数组
   noticeList.forEach(item => {
       let year = new Date(item.publishTime).getFullYear() *//获取每一项的年份
       if(noticeInfo.value[year]){
          noticeInfo.value[year].push(item)  //如果不是空对象则push后面的项
       }else{
          noticeInfo.value[year] = [item]   //如果是空对象则放入第一项
       }
    })
    循环处理后noficeInfo即为目标对象
    

以对象结构进行v-for循环渲染

得到的noticeInfo结构为： 2023：{[{},{},{},....]}, 2024:{[{},{},...]}

渲染方式：

   <template v-for="(value,key) in noticeInfo" :key="key">
    <p class="title-item">{{ key }}</p>
    <el-timeline-item center hollow v-for="(item,index) in value" :key="item.id">
      <div class="line-item" @click="showDetail(item)" style="cursor: pointer;">
        <div class="left-time">{{ item.publishTime.split(" ")[0].substring(5,7) }}/{{ item.publishTime.split(" ")[0].substring(8,10) }}</div>
        <div class="info-right">
          <h4>{{ item.title }}</h4>
          <p v-html="item.content.replace(/<[^>]*>|<\/[^>]*>/gm, '')"></p>
        </div>
      </div>
    </el-timeline-item>
  </template>