Vuetify 2中如何让v-data-table展开项与根组件表头对齐？

不用在展开面板里嵌套独立表格，直接把根表格的表头设为完整列集合，让根行跨列显示，展开内容直接匹配表头列即可实现完美对齐，结构更简洁：

修改后的完整代码 #

<template>
  <v-data-table
    :headers="fullHeaders"
    :items="panels"
    item-key="panel"
    show-expand
    :expanded.sync="expandedItems"
  >
    <!-- 根行：Panel内容跨所有列 -->
    <template v-slot:[`item.panel`]="{ item }">
      <td :colspan="fullHeaders.length">{{ item.panel }}</td>
    </template>

    <!-- 展开面板：直接渲染对应列的表格行 -->
    <template v-slot:expanded-item="{ item }">
      <tr v-for="(vendor, vendorIndex) in item.vendors" :key="vendorIndex">
        <td>
          <p>notes here</p>
        </td>
        <td>{{ vendor.name }}</td>
        <td>{{ vendor.status }}</td>
        <td>{{ vendor.distance }}</td>
        <td>{{ vendor.on_time }}</td>
        <td>
          <v-chip-group column>
            <v-chip
              v-for="(tag, tagIndex) in vendor.vendor_tags"
              :key="tagIndex"
              :color="tag.color"
            >
              {{ tag.tag }}
            </v-chip>
          </v-chip-group>
        </td>
        <td>
          <v-btn>Assign</v-btn>
        </td>
      </tr>
    </template>
  </v-data-table>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api'
import { order } from '@/plugins/order/Order'
import { PanelData } from "@/types";

export default defineComponent({
  props:{
    panels: {
      default: () => [],
      type: Array as () => PanelData[]
    }
  },
  setup() {
    // 统一的完整表头：同时作为根表格和展开内容的列基准
    const fullHeaders = ref([
      {text: 'Notes', sortable: false, value: 'notes'},
      {text: 'Name', sortable: false, value: 'name'},
      {text: 'Assign Status', sortable: false, value: 'assign_status'},
      {text: 'Distance', sortable: false, value: 'distance'},
      {text: 'On-Time %', sortable: false, value: 'on_time'},
      {text: 'Tags', sortable: false, value: 'tags'},
      {text: 'Assign', sortable: false, value: 'assign_action'},
    ])

    const expandedItems = ref([])

    return {
      fullHeaders,
      expandedItems,
      order,
    }
  },
})
</script>

关键修改说明 #

1. 统一表头：将原来分开的根表头和展开面板表头合并为一个fullHeaders，作为根表格的表头，让顶部直接显示所有需要的列。
2. 根行跨列处理：根行的Panel内容通过colspan属性跨满所有列，确保根行占据整行空间，不破坏表头的列结构。
3. 简化展开内容结构：去掉嵌套的v-data-table，直接用原生表格行<tr>和单元格<td>渲染每个供应商数据，每个<td>对应顶部表头的一列，自然实现对齐。

这种方案不需要额外处理样式，完全利用表格的原生列对齐特性，结构更简洁，性能也更好。

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