Vue3 - Element Plus 表格组件 table 隐藏鼠标移入时 hover 高亮背景色，el-table 组件去除鼠标悬停在表格行的 hover 高亮效果（完美解决表格合并后导致行错位）

在Vue3中使用Element Plus的表格组件el-table时，如果你想要隐藏鼠标移入行时的hover高亮背景色，可以通过CSS来覆盖默认的样式。

首先，你需要确定el-table和el-table-row的类选择器，然后在你的组件的<style>标签或者外部CSS文件中覆盖对应的样式。

以下是一个简单的例子，演示如何通过CSS去除hover效果：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    class="no-hover-highlight"
  >
    <!-- 列定义 -->
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  // 数据列表
]);
</script>
 
<style>
/* 添加一个自定义的class来覆盖hover效果 */
.no-hover-highlight .el-table__row:hover {
  background-color: inherit; /* 或者设置为和表格背景色相同的颜色 */
}
</style>

在这个例子中，.no-hover-highlight 是一个自定义的类，用来覆盖默认的hover效果。.el-table__row:hover 是CSS选择器，用来选中鼠标悬停在表格行上时的元素，然后将背景色设置为inherit（继承父元素的背景色），或者设置为与表格背景色相同的颜色，从而去除hover效果。