如何在 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> 并使用 Dynamic Slot Names 来完成此操作。动态插槽名称的语法类似于 <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