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

具体效果:

相关推荐
wfsm2 分钟前
flowable使用01
java·前端·servlet
excel6 分钟前
深度解析:Vue <script setup> 中的 defineModel 处理逻辑源码剖析
前端
excel8 分钟前
🧩 深入理解 Vue 宏编译:processDefineOptions() 源码解析
前端
excel9 分钟前
Vue 宏编译源码深度解析:processDefineProps 全流程解读
前端
excel12 分钟前
Vue SFC 编译器源码深度解析:processDefineEmits 与运行时事件生成机制
前端
excel14 分钟前
Vue 3 深度解析:defineModel() 与 defineProps() 的区别与底层机制
前端
excel16 分钟前
深入解析 processDefineExpose:Vue SFC 编译阶段的辅助函数
前端
dcloud_jibinbin16 分钟前
【uniapp】小程序体积优化,分包异步化
前端·vue.js·webpack·性能优化·微信小程序·uni-app
桜吹雪17 分钟前
自定义instanceof运算符行为API: Symbol.hasInstance
前端
qq_4275060818 分钟前
基于Vue 3和Element Plus实现简单的钩子函数管理各类弹窗操作
前端·javascript·vue.js