Vuetify 3 v-data-table如何默认展开分组行？

要实现页面加载时分组自动展开，你可以利用Vuetify 3 v-data-table的expanded属性，初始化时将所有分组的唯一键值填入该数组即可。

具体实现步骤： #

• 在组件的data中添加expanded数组，通过处理数据源，收集所有分组字段的唯一值作为初始展开项。
• 将expanded数组绑定到v-data-table的:expanded属性上。

修改后的完整代码： #

<template>
  <v-data-table
    :group-by="groupBy"
    :headers="headers"
    :items="desserts"
    :sort-by="sortBy"
    :expanded="expanded" <!-- 新增展开状态绑定 -->
    class="elevation-1"
    item-value="name"
  ></v-data-table>
</template>

<script>
export default {
  data: () => {
    const desserts = [
      {
        name: 'Frozen Yogurt',
        category: 'Ice cream',
        dairy: 'Yes',
      },
      {
        name: 'Ice cream sandwich',
        category: 'Ice cream',
        dairy: 'Yes',
      },
      {
        name: 'Eclair',
        category: 'Cookie',
        dairy: 'Yes',
      },
      {
        name: 'Cupcake',
        category: 'Pastry',
        dairy: 'Yes',
      },
      {
        name: 'Gingerbread',
        category: 'Cookie',
        dairy: 'No',
      },
      {
        name: 'Jelly bean',
        category: 'Candy',
        dairy: 'No',
      },
      {
        name: 'Lollipop',
        category: 'Candy',
        dairy: 'No',
      },
      {
        name: 'Honeycomb',
        category: 'Toffee',
        dairy: 'No',
      },
      {
        name: 'Donut',
        category: 'Pastry',
        dairy: 'Yes',
      },
      {
        name: 'KitKat',
        category: 'Candy',
      },
    ];

    // 收集所有dairy字段的唯一值，处理undefined的情况
    const uniqueGroups = [...new Set(desserts.map(item => item.dairy ?? 'Undefined'))];

    return {
      sortBy: [{ key: 'name' }],
      groupBy: [{ key: 'dairy' }],
      headers: [
        {
          title: 'Dessert (100g serving)',
          align: 'start',
          value: 'name',
          groupable: false,
        },
        { title: 'Category', value: 'category', align: 'end' },
        { title: 'Dairy', value: 'dairy', align: 'end' },
      ],
      desserts,
      expanded: uniqueGroups, // 初始化展开所有分组
    };
  },
};
</script>

说明： #

• 通过new Set和数组展开操作，快速获取分组字段的唯一值，避免重复。
• 使用item.dairy ?? 'Undefined'处理数据源中分组字段缺失的情况，确保所有分组都能被正确识别并展开。
• 绑定expanded属性后，页面加载时所有分组会自动处于展开状态，和Vuetify 2的默认行为一致。

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