el-table组件样式如何二次修改?

文章目录


前言

ElementUI中的组件el-table表格组件提供了丰富的样式,有一个全选框的el-table组件,提供了全选框和多选。


一、去除全选框按钮样式

原本默认是有全选框的。假如有一些开发者,因为某些需求,不想要这个全选框按钮,我们可以通过样式修改掉这个全选框按钮。(本人碰到过这种需求)

二、表头颜色的修改

原本是这样的。

我们只需要加入这两行代码就可以修改默认样式:

c 复制代码
/* 全选按钮消失 */
::v-deep
  .el-table__header
  thead
  th:nth-child(1)
  .cell
  .el-checkbox
  .el-checkbox__input
  .el-checkbox__inner {
  display: none;
}
/* 表头颜色 */
:deep(.el-table thead) {
  color: black;
}

具体效果:

相关推荐
pe7er42 分钟前
window管理开发环境篇 - 持续更新
前端·后端
We་ct2 小时前
LeetCode 5. 最长回文子串:DP + 中心扩展
前端·javascript·算法·leetcode·typescript
lilihuigz5 小时前
Tutor LMS 4.0 Beta版全新上线:以学习者为中心的移动优先学习体验
学习·在线教育·lms
William Dawson5 小时前
2026软考中级系统集成项目管理工程师备考笔记
笔记·系统集成项目管理工程师
陈随易5 小时前
有生之年系列,Nodejs进程管理pm2 v7.0发布
前端·后端·程序员
冰暮流星6 小时前
javascript之事件代理/事件委托
前端
@yanyu6667 小时前
登录注册功能-明文
vue.js·springboot
陈随易7 小时前
AI时代,你还在坚持手搓文章吗
前端·后端·程序员
love530love8 小时前
精简版|Claude-HUD 插件介绍 + 一键安装教程
人工智能·windows·笔记
kuinnebula8 小时前
RTSP学习
学习