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>

vue.js中的动态表行数

1 个答案: