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

具体效果:

相关推荐
蝴蝶不愿意2 分钟前
《苍穹外卖》项目学习记录-Day10来单提醒
学习
雷神乐乐2 分钟前
创建前端项目的方法
前端·javascript·vue.js
pay顿6 分钟前
C++基础day1
c++·学习·笔试
prince_zxill8 分钟前
JavaScript面向对象编程:Prototype与Class的对比详解
前端·javascript·ecmascript·原型模式
Qhumaing12 分钟前
Python学习——函数参数详解
开发语言·python·学习
计算机-秋大田40 分钟前
基于SpringBoot的美食烹饪互动平台的设计与实现(源码+SQL脚本+LW+部署讲解等)
vue.js·spring boot·后端·课程设计·美食
D.eL44 分钟前
Vue 2 项目中 Mock.js 的完整集成与使用教程
前端·javascript·vue.js
brzhang1 小时前
墙裂推荐一个在 Apple Silicon 上创建和管理虚拟机的轻量级开源工具:lume
前端·后端
玄客)2 小时前
PHP代码审计学习02
学习
轻口味2 小时前
Vue.js 响应式引用与响应式数据(`ref` 和 `reactive`)
vue.js