vue.js 中的动态表行跨度

Question

有人在 vue.js 中尝试过动态表行跨度吗？

以下是数据

{
    date: '2018-08-14',
    temp_que : 120,
},
{
    date: '2018-08-14',
    temp_que : 120,
},
{
    date: '2018-08-15',
    temp_que : 120,
},
{
    date: '2018-08-15',
    temp_que : 120,
},

下面是html vue

<template v-for="(item, i) in list">
  <tr> 
    <td
      :rowspan=""
      v-if=""
      class="text-center"
      v-text="item.date"
    ></td>
  </tr>
</template>

问题是当日期相同时我如何放置行跨度？

Answer 1

首先，您需要计算相同日期的数量， 像这样： { 日期：'2018-08-14'， same_num:'计数', temp_que：120， },

  <template >
     <tr v-for="(item, i) in list"> 
       <td
         :rowspan="item.same_num"
         v-if="!i? true:item[i-1].date==item[i].date? '':true"
         class="text-center"
         v-text="item.date"
       ></td>
     </tr>
   </template>