如何在 vuetify 中向数据表标题添加工具提示？

Question

在 vuetify 的旧版本中，您可以访问 headerCell 插槽并轻松添加工具提示 - 请参阅https://codepen.io/nueko/pen/dZoXeZ

在最新版本中，您已命名插槽，因此您需要先知道标题名称

<template v-slot:header.givenname="{ header }">

有没有办法向所有标题添加工具提示？

Answer 1

有两种方法可以实现这一点。

选项 1：自定义整个表格行

如果您需要自定义表格标题内的整个行元素，这可能很有用。即使我不建议您遵循这种方式，如果您不想放弃 v-data-table 中默认存在的排序功能。

例子：

<template v-slot:header="{ props: { headers } }">
  <thead>
    <tr>
      <th v-for="h in headers">
        <v-tooltip bottom>
        <template v-slot:activator="{ on }">
          <span v-on="on">{{h.text}}</span>
        </template>
        <span>{{h.text}}</span>
      </v-tooltip>
      </th>
    </tr>
  </thead>
</template>

工作笔：https : //codepen.io/onelly/pen/QWWmpZN

选项 2：在不丢失排序功能的情况下自定义每个标题

我想这更像是您正在尝试做的事情以及旧方式的替代品。您可以循环<template v-slot:header>并使用动态插槽名称来完成此操作。动态插槽名称的语法如下所示<template v-slot:[dynamicSlotName]>。

例子：

<template v-for="h in headers" v-slot:[`header.${h.value}`]="{ header }">
  <v-tooltip bottom>
    <template v-slot:activator="{ on }">
      <span v-on="on">{{h.text}}</span>
    </template>
    <span>{{h.text}}</span>
  </v-tooltip>
</template>

工作笔：https : //codepen.io/onelly/pen/ExxEmWd