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

Question

我正在尝试自定义我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>

我在文档中看到如何只为这样的 ONE 标头执行此操作：

<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>

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

Answer 1

您可以使用header(not 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>

请参阅此工作示例。