elementui中table表格单元格背景、文字颜色修改（包含鼠标移入移出）

在Element UI中，可以通过使用cell-style和header-cell-style属性来修改表格单元格的背景色和文字颜色。如果需要在鼠标移入移出时改变样式，可以使用CSS伪类:hover。

以下是一个简单的例子，展示如何修改单元格的背景色和文字颜色：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :cell-style="cellStyle"
    :header-cell-style="headerCellStyle"
  >
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        // ...更多数据
      ]
    };
  },
  methods: {
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 1) {
        return 'background-color: #f5f7fa; color: #909399;';
      }
    },
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      return 'background-color: #f5f7fa; color: #606266;';
    }
  }
};
</script>
 
<style scoped>
/* 鼠标移入单元格时的背景色和文字颜色 */
.el-table .cell:hover {
  background-color: #f0f9eb;
  color: #67c23a;
}
/* 鼠标移入表头单元格时的背景色和文字颜色 */
.el-table th.el-table__cell:hover {
  background-color: #f0f9eb;
  color: #67c23a;
}
</style>

在上述代码中，cell-style和header-cell-style属性接受一个函数，该函数返回一个样式字符串。你可以在该函数中根据自己的逻辑设置不同行或列的样式。

CSS部分使用了:hover伪类来改变鼠标移入单元格时的样式。由于Element UI的样式使用了更具体的选择器，因此我们需要增加.el-table .cell和.el-table th.el-table__cell以确保我们的样式优先级足够高，从而覆盖默认的样式。

请注意，根据你的Element UI版本，上述类名可能会有变动。确保在你的项目中检查最新的类名。