如何移除VDataTable分组标题并默认展开分组头部（Nuxt3+Vuetify3）

1. 移除表头的“Group”列 #

Vuetify分组时会默认生成一个Group列，直接用CSS隐藏即可：

<style scoped>
.v-data-table__group-column {
  display: none;
}
</style>

2. 默认展开所有分组 #

在脚本里初始化expanded变量，把所有分组的日期值放进去，绑定到表格的expanded属性就能让所有分组默认展开：

// 初始化所有分组为展开状态
const expanded = ref(items.value.map(item => item.date))

然后在<v-data-table>上添加属性： :expanded="expanded"

3. 移除分组切换按钮 #

直接修改group-header模板，删掉切换按钮，只保留分组日期：

<template #group-header="{ item, columns }">
  <tr>
    <td :colspan="columns.length" class="font-weight-bold">
      {{ item.value }}
    </td>
  </tr>
</template>

完整修改后的代码 #

<script setup lang="ts">
import { VDataTable } from 'vuetify/labs/VDataTable'

const headers = ref([
  { title: 'Employee Name', align: 'start', sortable: false, key: 'name' },
  { title: 'Time In', align: 'center', sortable: false, key: 'timeIn' },
  { title: 'Status In', align: 'center', sortable: false, key: 'statusIn' },
  { title: 'Location In', align: 'center', sortable: false, key: 'locationIn' },
  { title: 'Time Out', align: 'center', sortable: false, key: 'timeOut' },
  { title: 'Status Out', align: 'center', sortable: false, key: 'statusOut' },
  { title: 'Status', align: 'center', sortable: false, key: 'status' },
  { title: 'Workhour', align: 'center', sortable: false, key: 'workhour' },
  { title: 'Action', align: 'end', sortable: false, key: 'action' }
])

const items = ref([
    { id: 1, date: "12-06-2023", name: 'Geofany Galindra', timeIn: '07:39:38 WIB', statusIn: 'On Time', locationIn: 'Others', timeOut: '17:49:18 WIB', statusOut: 'Checked Out', status: 'Present', workhour: '08:50:28', },
    { id: 2, date: "11-06-2023", name: 'Geofany Galindra', timeIn: '07:39:38 WIB', statusIn: 'On Time', locationIn: 'Others', timeOut: '17:49:18 WIB', statusOut: 'Checked Out', status: 'Present', workhour: '08:50:28', },
])

const groupBy = ref([
    { key: 'date' }
])

// 初始化所有分组为展开状态
const expanded = ref(items.value.map(item => item.date))
</script>

<template>
  <v-data-table 
    :group-by="groupBy" 
    :headers="headers" 
    :items="items" 
    :expanded="expanded"
    item-value="name" 
    class="elevation-0"
  >
    <template #group-header="{ item, columns }">
      <tr>
        <td :colspan="columns.length" class="font-weight-bold">
          {{ item.value }}
        </td>
      </tr>
    </template>
  </v-data-table>
</template>

<style scoped>
/* 隐藏默认的Group列 */
.v-data-table__group-column {
  display: none;
}
</style>

内容的提问来源于stack exchange，提问作者Geofany Galindra