Dynamic table rowspan in vue.js

Question

Has anybody tried dynamic table rowspan in vue.js?

Below is data

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

Below is html vue

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

Question is how I put rowspan when date got same date?

Joe · Accepted Answer · 2018-11-12 09:37:14Z

8

First,you need to count the number of same date, like this: { 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>

answered Nov 12, 2018 at 9:37

Joe

812 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joe Over a year ago

'!i?' make sure 'i>0',so item[i-1] is valid.'list' must be a Array

Collectives™ on Stack Overflow

Dynamic table rowspan in vue.js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related