在element中表格中实现悬停显示当前内容，离开隐藏当前内容

要在 Element UI 表格中实现悬停显示当前内容，离开时隐藏当前内容，可以使用以下步骤：

1. 确保你已经安装并导入了 Element UI 库。

2. 在你的 Vue 组件中，使用 `<el-table>` 组件，并设置需要展示的数据和列信息。

3. 在需要显示内容的列中，可以使用 `<template>` 标签，并在其中定义自定义内容。

4. 使用 `@mouseenter` 和 `@mouseleave` 事件监听器来控制显示和隐藏内容。

以下是一个简单的示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column label="Actions">
      <template #default="{ row }">
        <template v-if="row.hovered">
          <!-- 显示的内容 -->
          <div>{{ row.name }}</div>
        </template>
        <div @mouseenter="row.hovered = true" @mouseleave="row.hovered = false">
          <!-- 悬停区域 -->
          Hover here
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25, hovered: false },
        { name: 'Jane', age: 30, hovered: false },
        // ...
      ]
    };
  }
};
</script>

<style>
/* 样式可以根据实际需求进行调整 */
div[hidden] {
  display: none;
}

.el-table__body-wrapper div {
  cursor: pointer;
}
</style>

在上述示例代码中，我们在数据中添加了一个 `hovered` 属性，用于表示鼠标是否悬停在该行上。通过绑定的事件监听器 `@mouseenter` 和 `@mouseleave` 来改变 `hovered` 属性的值，从而控制内容的显示和隐藏。

在样式中，我们使用了 `[hidden]` 属性选择器来隐藏内容，并为悬停区域添加了 `cursor: pointer` 样式以提供鼠标悬停的提示。

请注意，这只是一个简单的示例，实际使用中你可能需要根据具体需求进行调整和扩展。