vue怎么根据对象中相同字段用rowspan属性来实现table列表行的合并

1.template 部分的

<template>
  <table border="1">
    <tbody>
      <tr v-for="(item, index) in dataSource" :key="item.id">
        <td v-if="isFirstOfSameGroup(item, index)" :rowspan="getRowCountOfSameGroup(item, index)">
          {{ item.name }}
        </td>
        <td>{{ item.value }}</td>
      </tr>
    </tbody>
  </table>
</template>

2.js部分的

<script>
 export default {
  data() {
    return {
      dataSource: [
        { id: 1, name: 'A', value: 'foo' },
        { id: 2, name: 'A', value: 'bar' },
        { id: 3, name: 'B', value: 'baz' },
        { id: 4, name: 'A', value: 'qux' },
        { id: 5, name: 'C', value: 'quux' },
      ],
    };
  },

 methods: {
    isFirstOfSameGroup(item, index) {
      return index === 0 || this.dataSource[index - 1].name !== item.name;
    },
    getRowCountOfSameGroup(item, index) {
      let count = 1;
      for (let i = index + 1; i < this.dataSource.length; i++) {
        if (this.dataSource[i].name === item.name) {
          count++;
        } else {
          break;
        }
      }
      return count;
    },
  },
};
</script>