element中table的列标题自定义_element plus自定义 table 标题renderheader

作者：Gausst松鼠会 | 2024-05-03 11:57:07

踩

element plus自定义 table 标题renderheader

一、需求

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/529502