修改(elementui)el-table底层背景色

文章介绍了如何在Vue项目中修改特定页面的el-table背景色,方法是添加类名和使用scoped属性,以及如何设置全局背景色,涉及创建独立CSS文件并引用。同时提到了寻找样式属性的方法是通过浏览器开发者工具F12进行查看。

1. 需求:仅修改当前页面的背景色,不修改所有el-table的背景色。

  1. 先给table添加类名(如class="styleTable")

  1. 在style上面添加scoped

  1. 写法:类名 ::v-deep .el-table类名{}

注意:给styleTable也设置背景色为透明才生效。

如下图所示👇

2. 需求:修改全局背景色

单独创建一个css文件,给el-table th,el-table_cell等你要修改的类名添加背景色为透明;在每个vue页面都引用此文件即可生效。

扩展 (也可以不用看)

  1. 需求:设置table的最低高度

把padding的值设为0即可。

.el_table .el_table_cell{
   padding:0px
}

2. 怎么找是设置哪一个样式的属性?

F12打开控制台,然后找到Elements,点击【箭头】选中表格,然后到它的属性,我比较笨,我是一个一个试,最后发现.el_table .el_table_cell 设置了就成功了。

此文档仅供参考哈,鄙人也是刚踏进前端的门,可能写的有误,还请高人指导。🙏

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值