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

【问题标题】：How to custom all headers in v-data-table?如何自定义 v-data-table 中的所有标题？
【发布时间】：2021-02-17 02:52:12
【问题描述】：

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

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

【问题讨论】：

标签： javascript vue.js v-data-table

【解决方案1】：

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

此外，它位于默认标题下，因此您需要添加 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。

【讨论】：