el-table设置表头颜色和单元格颜色

在Vue.js的Element UI库中，`el-table` 是用于创建表格的数据展示组件。如果你想要设置表头和单元格的颜色，可以借助 `style` 或者 `class` 属性来实现。以下是基本步骤：

1. **设置表头颜色**：
- 在你的`<el-table-column>`标签内，添加一个`header-cell-style`属性，它可以接受一个返回CSS样式对象的函数。例如：

     <el-table-column header-cell-style="{ background: '#f00' }">
       <!-- 表头内容 -->
     </el-table-column>

这里将表头背景色设为了红色。

2. **设置单元格颜色**：
- 使用`cell-class-name`属性，根据数据动态绑定一个类名，然后在对应的CSS类中设置颜色。比如：

     <el-table-column prop="colorColumn" cell-class-name="custom-cell-color">
       <!-- 单元格内容 -->
     </el-table-column>

     .custom-cell-color {
       background-color: #ff0000; /* 设置单元格颜色 */
     }

这样，当`colorColumn`的数据值匹配上`custom-cell-color`时，对应单元格会显示红色。