如何让Vuetify中v-data-table的展开数据显示在目标行上方？

要让展开内容显示在目标行上方，需要绕过Vuetify默认的展开行后置逻辑，通过自定义表格主体渲染来手动控制内容顺序，具体实现如下：

1. 移除默认展开相关属性 #

先从v-data-table中删除show-expand和:expanded.sync="expanded"，因为我们要自己实现展开状态管理和行渲染逻辑。

2. 自定义表格主体（body插槽） #

使用v-slot:body接管整个表格主体的渲染，循环遍历数据项时，先渲染展开内容（仅当当前项处于展开状态），再渲染目标数据行。

3. 实现自定义展开/折叠逻辑 #

维护一个数组记录展开的项名称，通过点击图标切换展开状态。

修改后的完整代码 #

<template>
  <v-data-table 
    items-per-page.sync="-1"
    :headers="headers"
    :items="this.$store.state.results['Some Column']"
    hide-default-footer
    item-key="name"
  >
    <!-- 完全自定义表格主体 -->
    <template v-slot:body="{ items }">
      <tbody>
        <template v-for="item in items" :key="item.name">
          <!-- 展开内容：仅当item被展开时显示，放在目标行上方 -->
          <tr v-if="expanded.includes(item.name)">
            <td></td>
            <!-- 根据实际列数调整colspan，确保与表格列数匹配 -->
            <td class="pt-2 pl-8 second-level-data">
              <p v-for="subcategory in item.subcategories" :key="subcategory.name">
                {{ subcategory.name }}
              </p>
            </td>
            <td class="pt-2 second-level-data" v-for="year in years" :key="year">
              <p v-for="subcategory in item.subcategories" :key="subcategory.name">
                {{ subcategory[year] }}
              </p>
            </td>
            <td></td>
          </tr>

          <!-- 目标数据行 -->
          <tr>
            <!-- 自定义展开/折叠图标 -->
            <td>
              <v-icon 
                @click="toggleExpand(item.name)" 
                v-if="item.subcategories.length"
                class="cursor-pointer"
              >
                {{ expanded.includes(item.name) ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
              </v-icon>
            </td>
            <!-- 渲染当前项的各列内容，需与headers结构对应 -->
            <td>{{ item.name }}</td>
            <!-- 循环渲染年份列 -->
            <td v-for="year in years" :key="year">
              {{ item[year] }}
            </td>
            <td></td>
          </tr>
        </template>
      </tbody>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      expanded: [] // 记录展开的项名称
    }
  },
  methods: {
    toggleExpand(itemName) {
      const idx = this.expanded.indexOf(itemName)
      if (idx > -1) {
        // 折叠：移除展开记录
        this.expanded.splice(idx, 1)
      } else {
        // 展开：添加展开记录
        this.expanded.push(itemName)
      }
    }
  }
}
</script>

关键说明 #

• 行顺序控制：通过v-for循环中先渲染展开行（仅当展开时）、再渲染数据行的顺序，实现展开内容在目标行上方的效果。
• 列对齐：确保展开行的单元格数量与表格实际列数一致，避免布局错乱。
• 状态管理：用expanded数组手动记录展开项，替代Vuetify默认的展开状态管理逻辑。

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