我们在使用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>
效果图如下: