如何在vuetify中将工具提示添加到数据表头中?

时间:2019-11-05 15:19:47

标签: javascript vue.js vuetify.js

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

在最新版本中,您已为插槽命名,因此您需要在之前知道标题名称

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

是否可以将工具提示添加到所有标题?

1 个答案:

答案 0 :(得分: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