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

Question

我希望我的 v-data-table 的表头是“tab-able”。

因此，我创建了一个插槽并在列上放置了一个 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>

演示