如何自定义v-data-table中的所有标头？

问题描述

我正在尝试像这样自定义v-data-table中的所有标头

<v-data-table
          :headers="headers"
          :items="desserts"
          :disable-sort="true"
          :hide-default-footer="true"
        >
          <template v-slot:header="{ header }">
            {{ header.text.toupperCase() }}
          </template>
</v-data-table>

我在文档中看到了如何仅对一个标题执行以下操作：

<v-data-table
          :headers="headers"
          :items="desserts"
          :disable-sort="true"
          :hide-default-footer="true"
        >
          <template v-slot:header.name="{ header }">
            {{ header.text.toupperCase() }}
          </template>
</v-data-table>

但是我想自定义所有标题，但我不知道如何做到这一点。而且我的标题是动态的。

解决方法

您可以使用header（而不是header.<name>）插槽来完成此操作。请注意，此插槽用于一次生成所有标题列。这意味着您需要使用<th>指令动态创建v-for标签。

此外，它位于默认标题下，因此您需要添加hide-default-header道具。

<v-data-table :headers="headers" :items="desserts" hide-default-header>
    <template v-slot:header="{ props }">
        <thead>
            <tr>
                <th v-for="header in props.headers" :key="header.text">
                    {{ header.text.toUpperCase() }}
                </th>
            </tr>
        </thead>
    </template>
</v-data-table>

请参阅此working example。