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

Question

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

在最新版本中，您已经命名了时隙，因此您需要事先知道标题名称。

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

是否有向所有标题添加工具提示的方法？

Answer 1

实现这一目标的方法有两种。

选项1:自定义整个表行

如果您需要自定义表标题中的整个行元素，这可能是有用的。即使我不建议这样做，如果您不想松散排序功能，在默认情况下存在于v-数据表中。

示例：

<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