我试图渲染一个带有“面板”标题的v-data-table作为v-data-table的可扩展部分，并希望扩展部分内的数据与我在根目录上设置的标题对齐。到目前为止，我在Vuetify文档或试验中没有找到这样做的方法，我不得不把标题放在扩展的内部进行对齐。这将是一个次要的选择，但我只是知道必须有一种方法来完成第一个。
我正在尝试匹配这张图片中的内容：enter image description here
扩展中的头文件的代码如下：

`<template>
    <v-data-table
        :headers="panelHeaders"
        :items="panels"
        item-key="panel"
        show-expand
        :expanded.sync="expandedItems"
    >
        <template v-slot:[`item.panel`]="{ item }">
            {{ item.panel }}
        </template>
        <template v-slot:expanded-item="{ headers, item }">
            <td :colspan="headers.length">
                <v-data-table
                    :headers="expandedPanelHeaders"
                    :items="item.vendors"
                >
                    <v-row v-for="(expandedVendor, vendorIndex) in item.vendors" :key="vendorIndex">
                        <template  v-slot:item="{ item }">
                            <td>
                                <p>notes here</p>
                            </td>
                            <td>
                                <span>{{ expandedVendor.name }}</span>
                            </td>
                            <td>
                                <span>{{ expandedVendor.status }}</span>
                            </td>
                            <td>
                                <span>{{ expandedVendor.distance }}</span>
                            </td>
                            <td>
                                <span>{{ expandedVendor.on_time }}</span>
                            </td>
                            <td>
                                <v-chip-group column>
                                    <v-chip
                                        v-for="(tag, tagIndex) in expandedVendor.vendor_tags"
                                        :key="tagIndex"
                                        :color="tag.color"
                                    >
                                        {{ tag.tag }}
                                    </v-chip>
                                </v-chip-group>
                            </td>
                            <td>
                                <v-btn>Assign</v-btn>
                            </td>
                        </template>
                    </v-row>
                </v-data-table>
            </td>
        </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";

/**
 * @name AssignPanels
 *
 */

export default defineComponent({
    props:{
        panels: {
            default: () => [],
            type: Array as () => PanelData[]
        }
    },
    setup() {
        const panelHeaders = ref([
            { text: 'Panel', value: 'panel', sortable: false, align: 'start'},
        ])

        const expandedPanelHeaders = 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 {
            panelHeaders,
            expandedPanelHeaders,
            expandedItems,
            order,
        }
    },
})
</script>

字符串
`
任何帮助或建议将不胜感激，我是相当新的前端开发，并渴望找到一个更好的方法来做到这一点。