vue3渲染出的表格中鼠标悬停如何只在鼠标经过的地方显示文字

您可以使用 CSS 的 `::after` 伪元素来实现这个效果。具体实现步骤如下：

1. 给表格中每个单元格添加一个 `position: relative` 的样式，为了后面设置伪元素的位置做准备。

2. 给每个单元格添加一个 `::after` 伪元素，设置其 `content` 属性为空字符串，`position` 属性为 `absolute`，`top` 和 `left` 属性为0。

3. 设置 `::after` 伪元素的 `z-index` 为-1，让其在单元格下方。

4. 设置 `::after` 伪元素的背景颜色和文字颜色，以及 `opacity` 属性为0，让其默认隐藏。

5. 当鼠标悬停在单元格上时，设置 `::after` 伪元素的 `opacity` 属性为1，让其显示出来。

下面是一个示例代码：

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

td {
  position: relative;
}

td::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: #fff;
  color: #000;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

td:hover::after {
  opacity: 1;
}

这样，当鼠标悬停在单元格上时，就会显示出一个与单元格大小相同的背景，并显示设置的文字。