如何在vuejs中创建动态行跨度表？

data() {
  return {
    tableData: [
      { name: 'John', age: 25, gender: 'Male' },
      { name: 'Jane', age: 30, gender: 'Female' },
      { name: 'Bob', age: 35, gender: 'Male' }
    ]
  }
}

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in tableData" :key="item.name">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td>{{ item.gender }}</td>
    </tr>
  </tbody>
</table>

data() {
  return {
    tableData: [
      { name: 'John', age: 25, gender: 'Male' },
      { name: 'Jane', age: 30, gender: 'Female' },
      { name: 'Bob', age: 35, gender: 'Male' }
    ],
    rowspanData: {}
  }
}

computed: {
  computedRowspan() {
    const rowspanData = {};
    this.tableData.forEach((item, index) => {
      Object.keys(item).forEach(key => {
        if (!rowspanData[key]) {
          rowspanData[key] = {};
        }
        if (!rowspanData[key][item[key]]) {
          rowspanData[key][item[key]] = 1;
        } else {
          rowspanData[key][item[key]]++;
        }
      });
    });
    return rowspanData;
  }
}

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in tableData" :key="item.name">
      <td :rowspan="computedRowspan.name[item.name]">{{ item.name }}</td>
      <td :rowspan="computedRowspan.age[item.age]">{{ item.age }}</td>
      <td :rowspan="computedRowspan.gender[item.gender]">{{ item.gender }}</td>
    </tr>
  </tbody>
</table>