element中table的列标题自定义

一、需求

工作中要求表格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 }

类似的方法还有很多，比如：表头添加图标类，添加输入框，添加选择框的， 都可以使用这个方法