一、需求
工作中要求表格table中的某一列标题为红色如图
二、方案一
使用el-table-column自带的:render-header="renderHeader"函数
render-header | 列标题 Label 区域渲染使用的 Function | Function(h, { column, $index }) | — | — |
使用有点像v-html插入代码片段,很烦
具体使用可以看这个 el-table 自定义表头label
三、方案二
使用插槽
<el-table-column align="center" width="160">
<template slot="header">
<p style="color: red;">结算失败</p>
</template>
<template slot-scope="scope">
<p :class="scope.row.num === 0 ? '' : 'errtxt'">{{ scope.row.num }}</p>
</template>
</el-table-column>
自定义表头,自定义表头里面提到使用 Scoped Slot 方法来重置表头
Table-column Scoped Slot
name | 说明 |
---|---|
— | 自定义列的内容,参数为 { row, column, $index } |
header | 自定义表头的内容. 参数为 { column, $index } |
类似的方法还有很多,比如:表头添加图标类,添加输入框,添加选择框的, 都可以使用这个方法