自定义 v-data-table 标题并保留默认功能（排序）

Question

我希望我的 v-data-table 的表头是“可制表符”。

因此，我创建了一个槽并在列上放置了 tabindex。

不幸的是，排序不再起作用了。

有没有一种聪明的方法可以使列“可选项卡”并保持标题的标准功能？

这是我的代码：

<template v-slot:header="{ props:{ headers}  }">
    <thead>
        <tr>
            <th v-for="header in headers" :key="header.value">
                <td sortable="true"  tabindex="0">{{header.text}}</td>
            </th>
        </tr>
    </thead>
</template>

Answer 1

如果您想保留默认功能，请不要覆盖header插槽，而是仅覆盖header.<name>插槽，该插槽仅生成标题文本。

v-for要为所有列应用相同的槽模板，您可以使用动态槽名称的小技巧

<v-data-table
  :headers="headers"
  :items="desserts"
  class="elevation-1"
>
  <template v-for="header in headers" v-slot:[`header.${header.value}`]="{ header }">
    <span tabindex="0">{{ header.text }}</span>
  </template>
</v-data-table>

演示