vue表格同类项合并代码

预览效果图：

代码：

<template>
  <div class="table-data" style="margin:0px; width:600px;">
    <table class="table-group panel-6">
      <thead class="block-header">
      <tr>
        <th>name</th>
        <th>age</th>
        <th>like</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item,index) in infoList">
        <td>{{item.name}}</td>
        <td :rowspan="item.agespan" :class="{none: item.agedis}">{{item.age}}</td>
        <td :rowspan="item.likespan" :class="{none: item.likedis}">{{item.like}}</td> 
     </tr>
    </tbody>
    </table> 
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: [
          {'name':'Michael Edenfield','age':20,'like':'basketball'},
          {'name':'moudrick','age':21,'like':'basketball'},
          {'name':'Nick N','age':21,'like':'basketball'},
        ]
      }
    },
    computed: {
      infoList(){
        var list=this.list
        for (let field in list[0]) {
              var k = 0;
              while (k < list.length) {
                  list[k][field + 'span'] = 1;
                  list[k][field + 'dis'] = false;
                  for (var i = k + 1; i <= list.length - 1; i++) {
                      if (list[k][field] == list[i][field] && list[k][field] != '') {
                          list[k][field + 'span']++;
                          list[k][field + 'dis'] = false;
                          list[i][field + 'span'] = 1;
                          list[i][field + 'dis'] = true;
                      } else {
                          break;
                      }
                  }
                  k = i;
              }
          }
          return list;
      },
    }
  }
</script>