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

Question

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

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

我在文档中看到如何只对一个 header 这样做：

<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 也是动态的。

Answer 1

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

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

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

How to custom all headers in v-data-table?

javascript

vue.js

v-data-table