自定义 Element-UI Table 背景色，实现行高亮效果

在 Element-UI 中，表格组件提供了灵活的样式自定义，允许开发者根据需求调整表格外观，包括背景色和行高亮效果。本文将深入探讨如何修改 Element-UI table 表格的背景色，并实现鼠标经过某一行时背景色发生改变的交互效果。

修改表格背景色

在标签中加入默认样式

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

默认情况下，表格的背景色为白色。

在样式文件中添加代码

在样式文件中添加以下代码以自定义表格背景色：

.el-table {
  background-color: #f5f5f5;
}

将 #f5f5f5 替换为所需的背景色值。

实现行高亮效果

鼠标经过行背景色改变

要实现鼠标经过某一行时背景色发生改变的交互效果，需要在样式文件中添加以下代码：

.el-table__row:hover {
  background-color: #e5e5e5;
}

将 #e5e5e5 替换为鼠标经过行时所需的背景色值。

设置鼠标经过行字体颜色（可选）

若需要进一步自定义鼠标经过行的样式，可以添加以下代码以设置鼠标经过行字体颜色：

.el-table__row:hover td {
  color: #333;
}

将 #333 替换为鼠标经过行字体所需的顏色值。

完整代码示例

以下是修改表格背景色并实现行高亮效果的完整代码示例：

HTML

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

CSS

.el-table {
  background-color: #f5f5f5;
}

.el-table__row:hover {
  background-color: #e5e5e5;
}

.el-table__row:hover td {
  color: #333;
}

通过以上步骤，可以轻松地自定义 Element-UI table 表格的背景色，并实现鼠标经过某一行时背景色发生改变的交互效果，以增强表格的可视性和用户体验。