vue3 + element-plus 修改 el-table 鼠标悬停背景、斑马纹颜色、表头颜色

在Vue 3和Element Plus中，您可以通过CSS覆盖默认的表格样式来实现您想要的鼠标悬停背景、斑马纹色和表头颜色的修改。以下是一个简单的例子：

1. 首先，确保您已经在项目中安装了Element Plus。
2. 在您的Vue组件中，您可以添加以下的样式代码：

/* 修改表格行的鼠标悬停背景色 */
.el-table tr:hover {
  background-color: #f0f9eb; /* 您想要的斑马纹色 */
}
 
/* 修改表头颜色 */
.el-table th {
  background-color: #eaeaea; /* 您想要的表头颜色 */
}

3. 在Vue组件的<style>标签中引入上述CSS，或者在全局样式文件中添加以上CSS。
4. 在模板中，使用el-table组件正常使用即可。

<template>
  <el-table :data="tableData">
    <!-- 您的表格列定义 -->
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  // 您的表格数据
]);
</script>
 
<style>
/* 添加上面的CSS样式 */
</style>

确保您的样式选择器足够具体，以便覆盖默认的Element Plus样式。如果需要更具体的定制，您可以添加更多的CSS规则来覆盖默认样式。