如何在vuetify数据表的整行中添加工具提示

Question

我正试图在vuetify数据表的整行中添加一个v-tooltip，我只想在数组的特定行中添加，当item.confirmed为false时，拥有它的行将有一个工具提示，我设法做到了，但只使用了一个值，而不是整行。工具提示消息在数组中，vuetify工具提示结构使其更难执行，有人可以帮助我吗？

代码：

<app-table
:loading="loading.tableDetails"
:headers="headersDetailTable"
:items="uploadTable.lines"
:items-per-page="5"
>
<template #body="{ items }">
<tbody>
<v-tooltip bottom>
<template #activator="{ on }">
<tr v-for="(item, index) in items" :key="index" v-on="on">
<td>
{{ item.sku }}
</td>
<td>{{ item.productName }}</td>
<td>{{ item.quantity }}</td>
<td>{{ item.value }}</td>
<td>{{ item.totalValue }}</td>
<td v-if="!item.confirmed">{{ item.invalidLine }}</td>
</tr>
</template>
<span>{{ item.detail }}</span>
</v-tooltip>
</tbody>
</template></app-table
>

Answer 1

我检查了文档https://vuetifyjs.com/en/components/tooltips/#props并看到您的代码缺少示例中显示的attrs：

<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
Bottom
</v-btn>
</template>
<span>Bottom tooltip</span>
</v-tooltip>

您可以尝试如下修改代码。如果item.confirmed为false，也可以有条件地渲染工具提示中包装的行。

<app-table
:loading="loading.tableDetails"
:headers="headersDetailTable"
:items="uploadTable.lines"
:items-per-page="5"
>
<template #body="{ items }">
<tbody>
<tr v-if="item.confirmed">
*Row without a tooltip goes here*
</tr>
<v-tooltip v-else bottom>
<template #activator="{ on, attrs }">
<tr
v-for="(item, index) in items"
:key="index"
v-on="on"
v-bind="attrs"
>
<td>
{{ item.sku }}
</td>
<td>{{ item.productName }}</td>
<td>{{ item.quantity }}</td>
<td>{{ item.value }}</td>
<td>{{ item.totalValue }}</td>
<td v-if="!item.confirmed">{{ item.invalidLine }}</td>
</tr>
</template>
<span>{{ item.detail }}</span>
</v-tooltip>
</tbody>
</template></app-table
>

Answer 2

我可以使用mouseover和mouseleave

<app-table
:loading="loading.tableDetails"
:headers="headersDetailTable"
:items="uploadTable.lines"
@mouseleave.native="hideTooltipMessage"
>
<template #body="{ items }">
<v-tooltip v-model="showTooltip" allow-overflow bottom>
<template #activator="{}">
<tbody>
<tr
v-for="(item, index) in items"
:key="index"
@mouseover="
showTooltipMessage({
message: item.detail,
})
"
>
<td>
<v-layout justify-center>
{{ item.sku }}
</v-layout>
</td>
<td>
<v-layout justify-center>
{{ item.productName }}
</v-layout>
</td>
<td>
<v-layout justify-center>
{{ item.quantity }}
</v-layout>
</td>
<td>
<v-layout justify-center>
{{ item.value }}
</v-layout>
</td>
<td>
<v-layout justify-center>
{{ item.totalValue }}
</v-layout>
</td>
<td>
<v-layout justify-center>
{{ !item.confirmed ? item.invalidLine : undefined }}
</v-layout>
</td>
</tr>
</tbody>
</template>
<template v-if="showTooltipInvalidMessage && showTooltip">
<span>{{ showTooltipInvalidMessage }}</span>
</template>
</v-tooltip>
</template>
</app-table>