V-data-table通过v-slot:body控制展开的项目。

以下是使用Vuetify的V-data-table组件，并使用v-slot:body来控制展开项目的代码示例：

<template>
  <v-data-table
    :items="items"
    :expanded.sync="expandedItems"
    item-key="name"
    show-expand
  >
    <template v-slot:body="{ items }">
      <tbody>
        <tr v-for="item in items" :key="item.name">
          <td>
            <v-icon
              @click="toggleExpanded(item)"
              :rotate="expandedItems.includes(item) ? 180 : 0"
            >
              mdi-chevron-down
            </v-icon>
          </td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
        <tr v-if="expandedItems.includes(item)" v-for="subItem in item.subItems" :key="subItem.name">
          <td></td>
          <td colspan="3">{{ subItem.description }}</td>
        </tr>
      </tbody>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          name: 'Item 1',
          age: 20,
          gender: 'Male',
          subItems: [
            { name: 'Sub Item 1', description: 'Description 1' },
            { name: 'Sub Item 2', description: 'Description 2' }
          ]
        },
        {
          name: 'Item 2',
          age: 25,
          gender: 'Female',
          subItems: [
            { name: 'Sub Item 3', description: 'Description 3' },
            { name: 'Sub Item 4', description: 'Description 4' }
          ]
        }
      ],
      expandedItems: []
    }
  },
  methods: {
    toggleExpanded(item) {
      if (this.expandedItems.includes(item)) {
        this.expandedItems = this.expandedItems.filter(i => i !== item)
      } else {
        this.expandedItems.push(item)
      }
    }
  }
}
</script>

在上述代码中，我们使用Vuetify的V-data-table组件来渲染表格。通过在v-slot:body中使用items参数，我们可以访问到当前页面上显示的所有项目。我们通过v-for循环遍历这些项目，并在每个项目旁边显示一个展开/折叠图标。当用户点击图标时，我们通过toggleExpanded方法来切换项目的展开状态，并使用expandedItems数组来追踪哪些项目是展开的。

在v-for循环内部，我们使用v-if来判断当前项目是否被展开，如果是，则再次使用v-for循环遍历子项目，并显示子项目的详细描述。

请注意，我们通过在v-data-table上添加show-expand属性来启用展开功能，并通过:expanded.sync将expandedItems数组与组件的展开状态进行双向绑定，以确保展开状态在切换时得到更新。

希望这个示例可以帮助你理解如何使用V-data-table和v-slot:body来控制展开的项目。