el-table样式

1、实现效果，外部框是蓝绿色边框，深色背景，里面的表格首先设置透明色，然后应用自定义斑马纹。
在这里插入图片描述
2、代码
template代码，其中样式frameBordStyle是深色背景框，不负责表格样式，表格样式由tableStyle负责

<div class="frameBordStyle tableStyle"><el-table :data="tableData" :row-class-name="tableRowClassName" height="48vh" style="width: 100%"><el-table-column prop="name" label="名称" width="90"></el-table-column><el-table-column prop="action" label="操作动作" width="90"></el-table-column><el-table-column prop="date" label="操作时间"></el-table-column></el-table></div>

在methods里写下行样式函数，奇数行与偶数行运用不同样式

tableRowClassName({row,rowIndex}) {if (rowIndex % 2 == 1) {return 'deep_row'} else {return 'light_row'}},

style里面样式

.tableStyle {padding: 0px 5px;//底色透明::v-deep .el-table {background-color: transparent !important;}//表格标题样式::v-deep .el-table th.el-table__cell {background-color: rgba(8, 26, 34, 0.92) !important;color: #BEFFFE;font-weight: 400;font-size: 13px;}//表格内容字样式::v-deep .el-table td.el-table__cell div {font-size: 12px;color: #DBFFFF;opacity: 0.8;}//表格行底部白线设为透明::v-deep .el-table th.el-table__cell.is-leaf,::v-deep .el-table td.el-table__cell {border-bottom: 1px solid transparent !important;}//表格底部白线去掉.el-table::before {height: 0px;}//表格行鼠标悬浮样式::v-deep .el-table {tbody tr {&:hover {td {background-color: rgba($color: #81D3F8, $alpha: 0.5) !important;}}}}//斑马纹深色样式::v-deep .deep_row {background-color: transparent !important;}//斑马纹浅色样式::v-deep .light_row {background: rgba(202, 240, 245, 0.2) !important;}}