Vue+ELement UI el-table移入或选中某行时改变颜色

在Vue中使用Element UI的el-table组件时，可以通过row-class-name属性来设置表格行的类名，然后通过CSS来改变鼠标移入或选中行的颜色。

以下是一个简单的示例：

1. 在Vue组件中定义CSS类：

/* 定义鼠标移入行时的背景色 */
.el-table .hover-row {
  background-color: #f5f7fa;
}
 
/* 定义选中行的背景色 */
.el-table .select-row {
  background-color: #f0f9eb;
}

2. 在el-table组件上使用row-class-name属性：

<template>
  <el-table
    :data="tableData"
    row-class-name="tableRowClassName"
    @row-mouse-enter="handleMouseEnter"
    @row-mouse-leave="handleMouseLeave"
    @selection-change="handleSelectionChange"
  >
    <!-- 你的表格列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ...你的数据
      ],
      hoverRow: null, // 鼠标移入的行
      selectRows: new Set(), // 选中的行集合
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      let className = '';
      if (this.hoverRow === row) {
        className = 'hover-row';
      }
      if (this.selectRows.has(row)) {
        className = className ? `${className} select-row` : 'select-row';
      }
      return className;
    },
    handleMouseEnter(row) {
      this.hoverRow = row;
    },
    handleMouseLeave() {
      this.hoverRow = null;
    },
    handleSelectionChange(selection) {
      // 更新选中行集合
      this.selectRows = new Set(selection);
    },
  },
};
</script>

在这个示例中，tableRowClassName方法根据当前行和鼠标的状态来返回相应的类名。鼠标移入行时，会设置hoverRow为当前行，并应用hover-row类；选中行时，会把行对象加入selectRows集合，并在tableRowClassName方法中检查行对象是否在集合中来决定是否应用select-row类。CSS中定义的颜色会应用到相应的行上。