在 vuetify 的旧版本中,您可以访问 headerCell 插槽并轻松添加工具提示 - 参见 https://codepen.io/nueko/pen/dZoXeZ
在最新版本中你已经命名了slots,所以你需要先知道header name
<template v-slot:header.givenname="{ header }">
有没有办法为所有标题添加工具提示?
最佳答案
有两种方法可以实现这一点。
选项 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>
关于javascript - 如何将工具提示添加到 vuetify 中的数据表标题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58714401/