el-table 当前选中行颜色

在Element UI中，el-table是一个常用的表格组件，可以用于展示和编辑数据。当你选中el-table中的某一行时，可以通过设置CSS样式来改变当前选中行的颜色。

要改变当前选中行的颜色，可以使用以下步骤：

1. 首先，在el-table组件上添加一个属性`highlight-current-row`，将其值设置为true。这将启用当前选中行的高亮效果。

2. 接下来，在你的CSS样式文件中，添加以下样式规则：

.el-table .el-row--current {
  background-color: #f5f7fa; /* 设置选中行的背景色 */
  color: #409eff; /* 设置选中行的文字颜色 */
}

这样，当你选中el-table中的某一行时，该行的背景色将变为#f5f7fa，文字颜色将变为#409eff。

相关问题

如何设置el-table选中行的第一列的背景颜色

你可以通过自定义 `el-table` 的 `row-class-name` 属性来实现：

1. 首先，为 `el-table` 添加 `row-class-name` 属性，并将其绑定到一个方法上，例如 `tableRowClassName` 。

2. 在 `tableRowClassName` 方法中，通过 `row` 参数获取当前行的数据对象，并根据需要返回一个 CSS 类名。对于第一列，你可以使用 `row.$index === 0` 来判断是否为第一行，然后返回一个自定义的 CSS 类名，例如 `highlight-row`。

3. 在 CSS 文件中，为 `.highlight-row` 类名设置背景颜色样式即可。

示例代码如下：

HTML：

<el-table :data="tableData" row-class-name="tableRowClassName">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

JS：

methods: {
  tableRowClassName({$index, row}) {
    if ($index === 0) {
      return 'highlight-row';
    }
    return '';
  }
}

CSS：

.highlight-row {
  background-color: #f5f5f5;
}

如何设置el-table选中行的第一个单元格的背景颜色

你可以使用 `row-class-name` 属性来设置行的 class，然后在 CSS 中设置该 class 的样式。

例如，如果你想要设置选中行的第一个单元格的背景颜色为红色，可以这样做：

在 `el-table` 上添加 `row-class-name` 属性，并将其值设置为一个函数。该函数会接收当前行数据和行索引作为参数，并返回一个字符串，表示该行的 class 名称。

<el-table :data="tableData" row-class-name="table-row-class"></el-table>

在 CSS 中，设置 `.table-row-class td:first-child` 的背景颜色为红色。

.table-row-class td:first-child {
  background-color: red;
}

这样，当你选中某一行时，该行的第一个单元格的背景颜色就会变成红色。