Vue 表格如何实现列跨多行占满整个表格

<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>国籍</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="person in people" :key="person.id">
        <td :rowspan="person.rowspan">{{ person.name }}</td>
        <td>{{ person.age }}</td>
        <td>{{ person.nationality }}</td>
      </tr>
    </tbody>
  </table>
</template>
<script>
export default {
  data() {
    return {
      people: [
        { id: 1, name: '张三', age: 20, nationality: '中国', rowspan: 2 },
        { id: 2, name: '李四', age: 25, nationality: '中国', rowspan: 0 },
        { id: 3, name: 'John', age: 30, nationality: '美国', rowspan: 1 },
        { id: 4, name: 'Mike', age: 35, nationality: '英国', rowspan: 0 },
      ]
    }
  }
}
</script>
<p>在上面的示例中，通过<code>rowspan</code>属性来指定每个单元格要合并的行数。当<code>rowspan</code>为0时，表示不需要合并行。这样就可以实现表格中的列跨多行占满整个表格的效果。</p>