修改或清除element

2023-07-31 10:58| 来源: 网络整理| 查看: 265

文章目录前言一、表格边框修改样式二、底部边框线删除

前言

我们会发现element-plus的表格线虽然好用，但是灵活度较低，不够好看，自己想改的时候发现怎么都改不掉，我这边给大家出两种方案解决

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用官方自带的属性进行修改（推荐）二、在表格外层包一层自定义的div class="table-wrapper"，利用三箭头深度修改 /* *表格背景透明 */ /* //透明化整体 */ .table-wrapper /deep/.el-table,.el-table__expanded-cell { background-color: transparent !important; } /* //透明化行、单元格,删除表头下横线 */ .table-wrapper /deep/ tr, .table-wrapper /deep/ th, .table-wrapper /deep/ td { background: #1439391c !important; color:#fff; border-bottom: 0px; /* //删除表头下横线 */ } /* //hover时样式 */ .table-wrapper /deep/ .el-table tbody tr:hover>td { background-color: #367f7f78 !important } /* // 表格内容(有用) */ .table-wrapper /deep/ .el-table__row { background: #1439391c !important; color: #46d4ff; } /**表格背景透明end */ .table-wrapper >>> .el-table__row>td{ /* 去除表格线 */ border: none; } .table-wrapper >>> .el-table th.el-table__cell.is-leaf { /* 去除上边框 */ border-bottom: none !important; } .table-wrapper >>> .el-table__inner-wrapper::before{ /* 去除下边框 */ height: 0; }

【本文地址】

公司简介

联系我们