Vue结合ElementUi修改＜el-table＞表格的背景颜色和表头样式

在Vue中，你可以通过覆盖Element UI的默认样式来修改<el-table>组件的背景颜色和表头样式。以下是一个简单的例子，展示如何实现这一点：

1. 在你的Vue组件的<style>标签中，为<el-table>和<el-table__header-wrapper>添加CSS样式。

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <!-- 列配置 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 数据项
      ]
    };
  }
};
</script>
 
<style scoped>
/* 修改表格背景色 */
.el-table {
  background-color: #f0f0f0; /* 你想要的背景色 */
}
 
/* 修改表头样式 */
.el-table /deep/ .el-table__header-wrapper {
  background-color: #333; /* 表头背景色 */
  color: #fff; /* 表头字体颜色 */
}
</style>

请注意，由于Element UI使用了Scoped CSS，通常/deep/或者>>>是用来穿透Scoped CSS的。如果你的Vue版本不支持/deep/，你可以使用>>>或者将scoped属性从<style>标签中移除。

此外，如果你使用的是Element UI的更新版本，可能需要使用::v-deep选择器来代替/deep/，例如：

.el-table ::v-deep .el-table__header-wrapper {
  /* 样式 */
}

确保你的Element UI版本与你的Vue版本兼容，并且CSS选择器的深度应对应你的Vue和Element UI版本的要求。