vue使用element-ui table 清除表格背景色以及表格边框线
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
看代码
前端代码为
<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-column
prop="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-column
prop="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-column
prop="address"
label="来源地址">
<template slot="header" slot-scope="scope">
<p style="cursor: pointer;" @click="showContent('ip')">来源地址</p>
</template>
</el-table-column>
<el-table-column
prop="type"
label="欺诈类型">
<template slot="header" slot-scope="scope">
<p style="cursor: pointer;" @click="showContent('ip')">欺诈类型</p>
</template>
</el-table-column>
<el-table-column
prop="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;
}
最终效果为
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)