如何在Vuetify Data Table指定行添加整行v-tooltip

你当前代码的问题在于把v-tooltip放在了v-for循环外部，导致所有行共用同一个tooltip，且无法正确绑定每个item的detail值。要实现仅给item.confirmed为false的行添加整行tooltip，需要将v-tooltip嵌入循环内部，针对每一行单独处理：

<app-table
        :loading="loading.tableDetails"
        :headers="headersDetailTable"
        :items="uploadTable.lines"
        :items-per-page="5"
      >
        <template #body="{ items }">
          <tbody>
            <!-- 循环处理每个数据项 -->
            <template v-for="(item, index) in items" :key="index">
              <!-- 仅对confirmed为false的行添加tooltip -->
              <v-tooltip v-if="!item.confirmed" bottom>
                <template #activator="{ on }">
                  <tr v-on="on">
                    <td>{{ item.sku }}</td>
                    <td>{{ item.productName }}</td>
                    <td>{{ item.quantity }}</td>
                    <td>{{ item.value }}</td>
                    <td>{{ item.totalValue }}</td>
                    <td>{{ item.invalidLine }}</td>
                  </tr>
                </template>
                <span>{{ item.detail }}</span>
              </v-tooltip>
              <!-- confirmed为true的行直接渲染 -->
              <tr v-else>
                <td>{{ item.sku }}</td>
                <td>{{ item.productName }}</td>
                <td>{{ item.quantity }}</td>
                <td>{{ item.value }}</td>
                <td>{{ item.totalValue }}</td>
              </tr>
            </template>
          </tbody>
        </template>
</app-table>

关键修改点 #

• 将v-for循环移到外层<template>标签上，让每个数据项独立处理
• 通过v-if="!item.confirmed"条件渲染v-tooltip，仅对目标行生效
• 目标行通过v-tooltip的activator插槽绑定on事件，实现整行触发tooltip
• 非目标行直接渲染普通<tr>，保留原有表格逻辑

这样就能实现仅目标行显示整行tooltip，且每个tooltip对应正确的item.detail内容。

内容的提问来源于stack exchange，提问作者Paulo0056