您现在的位置是：网站首页> 编程资料编程资料

Vue如何设置el-table背景透明样式_vue.js_

2023-05-24 294人已围观

简介 Vue如何设置el-table背景透明样式_vue.js_

【前言】

一般我们在使用ElementUI组件库的时候，在使用el-table时，背景通常是白色的，但有时候不能满足我们的实际需求，我想让el-table背景变为透明色，下面就来说一下如何实现。

【内容】

说明：因为我们通常都是使用ElementUI库的组件，这个组件库是有自己的一套样式的，所以要想实现自己想要的效果，难免要重写样式来实现。

重写样式需要加（>>> 或者 /deep/），不加的话是不会生效的。

1、在el-table外加div并自定义class

2、重写css样式

.table /deep/ .el-table th { background-color: transparent!important; } .table /deep/ .el-table tr { background-color: transparent!important; } .table /deep/ .el-table--enable-row-transition .el-table__body td, .el-table .cell{ background-color: transparent; } .el-table::before {//去除底部白线 left: 0; bottom: 0; width: 100%; height: 0px; }

到此这篇关于Vue如何设置el-table背景透明样式的文章就介绍到这了,更多相关Vue el-table背景透明内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：vue3中cookie的详细使用过程_vue.js_

下一篇：vue项目检测依赖包是否有使用的问题_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网