vue使用element-ui table 清除表格背景色以及表格边框线

看代码
前端代码为

                 <div class="main_table t_btn2">// 设置表格背景色,字体颜色以及字体大小<el-table :header-cell-style="{backgroundColor:'transparent',color:'#ffffff',fontSize:'15px',textAlign:'center'}":cell-style="{color: '#fff',backgroundColor:'transparent',fontSize:'13px',textAlign:'center'}":row-style="{color: '#fff',backgroundColor:'transparent',fontSize:'13px',textAlign:'center'}":data="ipTableData"max-height="340"style="width: 100%"><el-table-columnprop="ip"label="IP":show-overflow-tooltip="true"><template slot="header" slot-scope="scope"><p style="cursor: pointer;" @click="showContent('ip')">IP</p></template></el-table-column><el-table-columnprop="domain":show-overflow-tooltip="true"><template slot="header" slot-scope="scope"><p style="cursor: pointer;" @click="showContent('ip')">域名</p></template></el-table-column><el-table-columnprop="address"label="来源地址"><template slot="header" slot-scope="scope"><p style="cursor: pointer;" @click="showContent('ip')">来源地址</p></template></el-table-column><el-table-columnprop="type"label="欺诈类型"><template slot="header" slot-scope="scope"><p style="cursor: pointer;" @click="showContent('ip')">欺诈类型</p></template></el-table-column><el-table-columnprop="count"label="拦截次数"><template slot="header" slot-scope="scope"><p style="cursor: pointer;" @click="showContent('ip')">拦截次数</p></template></el-table-column></el-table></div>

css样式代码

 // .t_btn2为你的上级父元素class名称 // 由于是只在本页面修改, 所以必须要用 /deep/ 或者 >>> 才能生效  /deep/ 是深度选择器,可自行百度了解更多.t_btn2 /deep/  .el-table, .el-table__expanded-cell {background-color: transparent;}.t_btn2 /deep/ .el-table tr {background-color: transparent!important;}.t_btn2 /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{background-color: transparent;}.t_btn2 /deep/  .el-table__row>td{border: none;}/* 清除底部横线 */.el-table::before {height: 0px;}

最终效果为

vue使用element-ui table 清除表格背景色以及表格边框线相关推荐

Element UI Table表格样式调整
调整Element UI Table表格的样式最终效果: 单元格合并,样式调整模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
Element UI table组件源码分析
本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...
Vue安装element ui踩坑
在vue安装element ui 的过程中报了许多错误,慢慢踩坑,希望能帮到各位 1. 输入 vue add element 输入 y y zh-CN 如果报错 ERROR comman ...
element ui table show-overflow-tooltip自定义样式
element ui table show-overflow-tooltip自定义样式在使用element ui table 组件时,表格td内容太多可设置show-overflow-tooltip ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端.使用element ui自带的icon太少,所以引入第三方的.截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅 ...
Node mysql mvc vue_net MVC +Vue.js+Element UI 笔记
最近项目需求,要在MVC里用Vue 与 Element UI,故而做个笔记来记录一些遇到的问题和处理思路 (方式比较麻瓜,如果不是临时用的话,建议还是学一下Vue-cli,新项目还是老老实实前后端分离 ...
element ui table组件筛选数据
需求:element ui table组件筛选全部数据 element ui 文档注意: 1. @filter-change 要写在table根元素,也就是<el-table @filter- ...
element ui table封装组件，render 函数动态事件设置
接着上一篇讲的,封装element ui table, 支持自定义列的展示和按照指定顺序展示自定义列需要在引用页面重新写一下,这样就可以定义化了,多数用于一些转换,或者操作列场景下,自行考虑即可,我 ...

vue使用element-ui table 清除表格背景色以及表格边框线

vue使用element-ui table 清除表格背景色以及表格边框线相关推荐

最新文章

热门文章