在vue3中如果要将element中的表格的当前行进行悬停显示图标离开图标隐藏的效果

在 Vue 3 中，要实现将 Element UI 表格的当前行悬停时显示图标，离开时隐藏图标的效果，可以使用以下步骤：

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

2. 在你的 Vue 组件中，使用 Element UI 的表格组件，并设置需要展示的数据和列信息。

3. 在表格的列定义中，添加一个自定义列，用于显示图标。例如，可以使用 `<el-table-column>` 组件，并在 `render` 函数中返回图标元素。

4. 在图标元素上绑定 `v-show` 指令，根据当前行是否悬停来决定显示或隐藏。你可以使用 `@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 }">
        <i class="icon" v-show="row.hovered" @mouseenter="row.hovered = true" @mouseleave="row.hovered = false">Icon</i>
      </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>
.icon {
  display: none;
}

tr:hover .icon {
  display: inline-block;
}
</style>

在上述示例代码中，我们在数据中添加了一个 `hovered` 属性，用于表示当前行是否悬停。当鼠标进入和离开行时，通过绑定的事件监听器来改变 `hovered` 属性的值，从而控制图标的显示和隐藏。

在样式中，我们使用了 CSS 选择器 `tr:hover .icon` 来定义悬停时图标的显示方式。

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