如何在 vuetify 中向數據表 header 添加工具提示？

Question

在 vuetify 上的舊版本中，您可以訪問 headerCell 插槽並輕松添加工具提示 - 請參閱https://codepen.io/nueko/pen/dZoXeZ

在最新版本中您已命名插槽，因此您需要知道 header 之前的名稱

<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