访问Vuetify作用域内的表colspan的数字属性值

<template>
  <v-data-table :headers="headers" :items="items">
    <template v-slot:headers="{ headers }">
      <tr>
        <th v-for="header in headers" :key="header.text" :colspan="header.colspan">
          {{ header.text }}
        </th>
      </tr>
    </template>
    <template v-slot:items="{ item }">
      <tr>
        <td :colspan="item.colspan">{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.gender }}</td>
      </tr>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: 'Name', value: 'name', colspan: 2 },
        { text: 'Age', value: 'age' },
        { text: 'Gender', value: 'gender' },
      ],
      items: [
        { name: 'John Doe', age: 25, gender: 'Male', colspan: 2 },
        { name: 'Jane Smith', age: 30, gender: 'Female' },
      ],
    };
  },
};
</script>