vue.js 中的动态表行跨度

Question

有人在 vue.js 中尝试过动态表 rowspan 吗？

下面是数据

{
    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>

问题是我如何在日期相同时放置 rowspan？

Answer 1

首先，您需要计算相同日期的数量，如下所示：{ date: '2018-08-14', same_num:'count', 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>