修改数据表Vuetify 2.0中默认槽isOpen

<template>
  <v-data-table
    :items="items"
    :headers="headers"
    item-key="id"
  >
    <template #item="{ item }">
      <tr @click="toggleOpen(item)">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
      <tr v-if="item.isOpen">
        <td colspan="2">
          <!-- 展示详细信息的内容 -->
          {{ item.details }}
        </td>
      </tr>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'John', age: 25, details: 'Details about John', isOpen: false },
        { id: 2, name: 'Alice', age: 30, details: 'Details about Alice', isOpen: false },
        // 更多数据项...
      ],
      headers: [
        { text: 'Name', value: 'name' },
        { text: 'Age', value: 'age' },
      ],
    };
  },
  methods: {
    toggleOpen(item) {
      item.isOpen = !item.isOpen;
    },
  },
};
</script>