el-table 修改表头样式

el-table 表格组件想要修改表头,可以使用 header-row-class-name 和 header-cell-class-name两种方式(仅个人习惯使用的两种方式)

第一种:header-cell-class-name(个人更倾向这种方式,写起来也更舒服)
首先,添加header-cell-class-name="table_header"属性,
在这里插入图片描述
其次:添加指定的table_header样式,这里需要注意,需要使用/deep/ 或者 ::v-deep(视预编译语言而定)来指定样式,否则渲染不到。
在这里插入图片描述

第二种:header-row-class-name
首先,添加header-row-class-name:table_header_class属性,
在这里插入图片描述
其次,设置table_header_class样式。这里需要注意,需要使用/deep/ 或者 ::v-deep(视预编译语言而定)来指定样式,否则渲染不到,打开F12可以看到,需要变更的颜色,实则为th标签
在这里插入图片描述
在这里插入图片描述
最终table表头渲染效果如图:
在这里插入图片描述

  • 11
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-table表头样式可以通过以下方式进行自定义: 1. 使用 slot-scope 自定义表头内容: ```html <template slot="header"> <el-table-column label="姓名"> <template slot="header"> <!-- 自定义表头样式 --> <span class="custom-header">姓名</span> </template> </el-table-column> </template> ``` 在上述示例中,我们通过在 el-table-column 组件内部使用 slot-scope 来自定义表头内容,并在自定义内容中添加了一个具有自定义样式的 span 元素。 2. 使用 scoped slot 自定义表头样式: ```html <el-table :data="tableData"> <el-table-column label="姓名"> <template slot-scope="scope"> <div class="custom-header">{{ scope.column.label }}</div> </template> </el-table-column> </el-table> ``` 在上述示例中,我们使用了 scoped slot 来自定义表头样式。通过 scope 对象可以获取到当前列的信息,例如 label 属性。 3. 使用 CSS 自定义表头样式: 可以通过给表头元素添加自定义的 CSS 类来修改表头样式。例如: ```html <el-table :data="tableData" class="custom-table"> <el-table-column label="姓名"></el-table-column> </el-table> ``` ```css .custom-table th { background-color: #f0f0f0; color: #333; } ``` 在上述示例中,我们给 el-table 组件添加了一个自定义的 CSS 类 custom-table,并通过 CSS 规则来修改表头的背景色和文字颜色。 通过以上几种方式,你可以根据自己的需求来自定义 el-table表头样式。记得将示例代码中的 class 名称和样式修改为你自己的需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值