Vue如何设置el-table背景透明样式
【前言】
一般我们在使用ElementUI组件库的时候,在使用el-table时,背景通常是白色的,但有时候不能满足我们的实际需求,我想让el-table背景变为透明色,下面就来说一下如何实现。
【内容】
说明:因为我们通常都是使用ElementUI库的组件,这个组件库是有自己的一套样式的,所以要想实现自己想要的效果,难免要重写样式来实现。
重写样式需要加(>>> 或者 /deep/),不加的话是不会生效的。
1、在el-table外加div并自定义class
<div class="table" style="margin-top:20px;"> <el-table :data="tableData" :header-cell-style="getRowClass" > <el-table-column label="a" type="index"></el-table-column> <el-table-column label="b" prop="data"></el-table-column> </el-table> </div>
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背景透明内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
element-ui和vue表单(对话框)验证提示语(残留)清除操作
这篇文章主要介绍了element-ui和vue表单(对话框)验证提示语(残留)清除操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决
这篇文章主要介绍了vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-09-09
最新评论