全局和局部修改el-table表头和内容颜色

在Element UI中，可以通过修改全局样式或在组件内部使用scoped样式来改变el-table的表头和内容颜色。

全局修改:

1. 在全局样式文件中添加对应的CSS规则。

/* 修改表头背景色 */
.el-table th {
  background-color: #A9A9A9; /* 你想要的颜色 */
}
 
/* 修改表头文字颜色 */
.el-table .cell {
  color: #FFFFFF; /* 你想要的颜色 */
}
 
/* 修改表格行背景色 */
.el-table .el-table__row {
  background-color: #FFFFFF; /* 你想要的颜色 */
}
 
/* 修改表格单元格内容颜色 */
.el-table .el-table__body td {
  color: #000000; /* 你想要的颜色 */
}

局部修改(scoped样式):

1. 在组件的<style scoped>部分添加对应的CSS规则。

<template>
  <el-table :data="tableData">
    <!-- 表格内容 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 数据
      ]
    };
  }
};
</script>
 
<style scoped>
/* 修改表头背景色 */
.el-table th {
  background-color: #A9A9A9; /* 你想要的颜色 */
}
 
/* 修改表头文字颜色 */
.el-table .cell {
  color: #FFFFFF; /* 你想要的颜色 */
}
 
/* 修改表格行背景色 */
.el-table .el-table__row {
  background-color: #FFFFFF; /* 你想要的颜色 */
}
 
/* 修改表格单元格内容颜色 */
.el-table .el-table__body td {
  color: #000000; /* 你想要的颜色 */
}
</style>

请确保使用的选择器匹配你想要修改的el-table实例。如果你有多个表格实例，可能需要添加更具体的选择器或使用devtools来确定正确的元素。