在vuetify的旧版本中,您可以访问headerCell插槽并轻松添加工具提示-请参见https://codepen.io/nueko/pen/dZoXeZ
在最新版本中,您已为插槽命名,因此您需要在之前知道标题名称
<template v-slot:header.givenname="{ header }">
是否可以将工具提示添加到所有标题?
答案 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>