Javascript 如何在vuetify中将工具提示添加到datatable标题？

在vuetify的旧版本中，您可以访问headerCell插槽并轻松添加工具提示-请参阅

在最新版本中，您已经命名了slots，因此您需要先知道头名称

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

---

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

有两种方法可以实现此目的

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

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

{{h.text}}
{{h.text}}

工作笔：

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

我想这更像是你正在尝试做的事情，是旧方式的替代。您可以循环

并使用来完成此操作。动态插槽名称的语法如下所示

示例：

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

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

{{h.text}}
{{h.text}}

---

工作笔：

谢谢，第二种选择正是我想要的。这太棒了！然而，当我尝试在这里添加示例时：它引发异常“意外标识符”，我认为它引用了v-slot头语法。在

v-slot:[`header.${h.value}`]=“{header}”

中提供一个参考链接，指向如何解释语法

[`header.${h.value}`]

。谢谢顺便提一下我使用的是内部模板：`……`所以我认为我需要逃避反勾号或实现替代方案？我想到的是逃避反勾号和

$

-这个

变成