javascript - Dynamic table rowspan in vue.js

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?

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?

Share Improve this question edited Nov 12, 2018 at 10:19 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Nov 12, 2018 at 8:36 Aiden Kim 1231 silver badge8 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Dynamic table rowspan in vue.js - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)