elementui || 如何更改el-table某一个表头的背景颜色和字体颜色

我们在使用elementui官方提供e-table的案例时，会发现表格的表头没有任何样式，这样的话首先是没有什么辨识性，其次是也不美观，降低了用户的使用体验。如下：

那我们可以做的是给表头一个背景颜色，这样表头的位置看起来就很明显。按照官网提示呢，可以使用header-cell-style属性

<el-table class="Firsttable" :data="formInline.approvals" border style="width: 100%" :header-cell-style="{ background: '#fafafa' }">
</el-table>

效果图：

但是，客户提了新的需求，这样还不明显，我需要把‘选择’二字标红，提醒用户可以选择。elementui并没有封装好怎么给某一个表头添加样式的，那么我们这里需要自己想办法，在这里，我用到了插槽的写法。具体代码如下：

<el-table class="Firsttable" :data="formInline.approvals" border style="width: 100%" :header-cell-style="{ background: '#fafafa' }">
                <el-table-column align="center" width="55" label="选择">
                  <template slot="header">
                    <span style="color:red">选择</span>
                  </template>
                  <template slot-scope="{ row, $index }">
                    <el-radio :label="row.id" v-model.trim="tempRadio" :disabled="isXQHT" @click.native="getTempRow(row, $index)"><span></span>
                    </el-radio>
                  </template>
                </el-table-column>
</el-table>

效果图如下：