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

在 Vue 3 中，你可以使用 `@mouseenter` 和 `@mouseleave` 事件来实现在表格的当前行悬停时显示图标，离开时隐藏图标的效果。下面是一个简单的示例代码：

<template>
  <div>
    <table>
      <tr v-for="(item, index) in tableData" :key="index" @mouseenter="showIcon(index)" @mouseleave="hideIcon(index)">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>
          <i v-show="hoverIndex === index" class="icon" @click="handleClick(index)">显示图标</i>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25 },
        { name: 'Jane', age: 30 },
        { name: 'Bob', age: 35 }
      ],
      hoverIndex: -1
    };
  },
  methods: {
    showIcon(index) {
      this.hoverIndex = index;
    },
    hideIcon(index) {
      this.hoverIndex = -1;
    },
    handleClick(index) {
      // 处理图标点击事件
    }
  }
};
</script>

<style>
.icon {
  display: none;
}

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

在上述代码中，使用 `v-for` 指令遍历 `tableData` 数组，将每一行的索引传递给 `@mouseenter` 和 `@mouseleave` 事件处理方法。通过 `hoverIndex` 数据属性来控制图标的显示和隐藏，当鼠标悬停在某一行时，设置 `hoverIndex` 为当前行的索引，图标显示；当鼠标离开时，设置 `hoverIndex` 为 -1，图标隐藏。

请注意，上述代码中的图标仅作为示例，你需要根据实际需求自行替换为合适的图标和逻辑。