如何在Vuetify 3中默认展开表格分组行？

要让v-data-table的分组默认处于展开状态，需要通过组件的expanded属性控制，具体步骤如下：

• 1. 定义存储展开分组标识的数组
     在组件的data中声明一个数组（比如expandedGroups），组件挂载时提取所有分组的唯一标识值填充进去。假设你的groupBy是单个字段（比如category），示例代码：

data() {
  return {
    expandedGroups: [],
    // 其他已有数据：report、headers、groupBy等
  }
},
mounted() {
  if (this.report) {
    // 提取所有分组的唯一值，避免重复
    this.expandedGroups = [...new Set(this.report.map(item => item[this.groupBy]))]
  }
}

如果是多字段分组（groupBy为数组），需要生成能唯一标识分组的组合值：

this.expandedGroups = [...new Set(this.report.map(item => 
  this.groupBy.map(key => item[key]).join('-')
))]

• 2. 在v-data-table上绑定expanded属性
     修改模板代码，给v-data-table添加:expanded="expandedGroups"绑定：

<v-data-table
  v-if="report"
  :items="report"
  :headers="headers"
  :group-by="groupBy"
  :items-per-page="itemsPerPage"
  :expanded="expandedGroups" <!-- 新增绑定 -->
  density="compact"
>
  <template #group-header="{ item, columns, toggleGroup, isGroupOpen }">
    <tr>
      <td :colspan="columns.length">
        Hello
      </td>
    </tr>
  </template>
</v-data-table>

页面加载后，所有分组就会默认处于展开状态。

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