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;
}

具体效果:

相关推荐
mldong2 分钟前
保姆级教程!手把手教你搭建FastAPI + Vue3前后端分离项目
vue.js·python·全栈
_dindong2 分钟前
Linux系统编程:线程概念
linux·运维·笔记·学习
Mintopia6 分钟前
🚀 Cesium-Kit:10 秒为你的 Cesium 项目添加动态光效标记
前端·javascript·cesium
Mintopia8 分钟前
🌩️ 云边协同架构下的 WebAI 动态资源调度技术
前端·javascript·aigc
Olrookie10 分钟前
若依前后端分离版学习笔记(十六)——scoped、路由跳转
前端·笔记
qaqxiaolei10 分钟前
高效办公利器:前端实现表格导出excel格式 + 自定义水印的完整方案
前端·javascript
叫我詹躲躲12 分钟前
为什么Bun.js能在3秒内启动一个完整的Web应用?
前端·javascript·bun
Olrookie13 分钟前
若依前后端分离版学习笔记(十七)——ruoyi开发规范&流程,请求流程,依赖引入,组件注册&通信
前端·笔记
Keepreal49614 分钟前
谈谈对闭包的理解以及常见用法
前端·javascript
luckymiaow15 分钟前
告别环境配置地狱!UniApp Android 本地 一键打包神器
前端