el-table选中行变色

在Element UI的表格组件（el-table）中，如果你想实现选中行的变色效果，你可以利用`row-class-name`属性结合Vue的计算属性或者条件渲染来动态改变每一行的CSS样式。这个属性会接收一个函数作为值，该函数会在渲染每一行时接收到当前行的数据作为参数，你可以根据数据状态设置背景色或其他样式变化。

这是一个基本示例：

<template>
  <el-table
    :data="tableData"
    :row-class-name="getRowClassName"
    highlight-current-row
  >
    <!-- ... 其他列配置 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // ... 表格数据
      ],
    };
  },
  computed: {
    getRowClassName(row) {
      if (row.isSelected) { // 假设isSelected是一个标记已选择的属性
        return "selected-row";
      }
      return '';
    },
  },
  methods: {
    toggleSelect(row) {
      row.isSelected = !row.isSelected; // 当前行切换选中状态
    },
  },
};
</script>

<style scoped>
.selected-row {
  background-color: lightblue; // 或者你喜欢的颜色
}
</style>

在这个例子中，当行被选中时，`getRowClassName`函数会返回"selected-row"，表单就会应用对应的CSS样式使其变色。`toggleSelect`方法用于切换行的选择状态。