需要
- el-table 通明背景 固定列 滚动条的解决 头疼~
根底
- node：14.17.3
- @vue/cli 5.0.1
- vue：2.6.12
- element-ui：2.15.6
1.设置表格通明背景后，革除表格下边框线
.el-table th.el-table__cell,.el-table tr,.el-table,.el-table__expanded-cell { background-color: transparent;}.el-table::before { width: 0;}
2.列表呈现纵向滚动条后，暗藏最右侧的空白列
.el-table th.gutter { display: none; width: 0;}.el-table colgroup col[name='gutter'] { display: none; width: 0;}
3.增加固定列后，调整固定列的款式
.el-table .el-table__fixed-right { height: auto !important; bottom: 5px !important; right: 4px !important; background-color: rgb(1, 10, 23); border-left: 1px solid rgba($color: #fff, $alpha: 1);}// 固定表格内的table-body.el-table__fixed-right .el-table__fixed-body-wrapper { height: auto !important; bottom: 5px !important;}// 暗藏固定列表头右侧多出单元格.el-table .el-table__fixed-right-patch { display: none;}// 革除固定列右侧边框线.el-table--border .el-table__cell:last-child { border-right: none !important;}// 重置固定列单元格背景色.el-table__fixed-right td.el-table__cell { background-color: rgb(1, 10, 23);}
4.table组件二次封装
<style lang="scss"> .table-wrapper { @include scrollBar($track-color: null); box-sizing: border-box; overflow: hidden; border: 1px solid #fff; border-radius: 4px; .table-head { padding: px2rem(5) 0 !important; color: #fff; font-weight: 400; background-color: rgba(204, 204, 204, 0.3) !important; } .table-row { padding: px2rem(5) 0 !important; color: #fff; } .el-icon-loading { font-size: px2rem(30); } //#region 重置款式 // 固定列 .el-table .el-table__fixed-right { height: auto !important; bottom: 5px !important; right: 4px !important; background-color: rgb(1, 10, 23); border-left: 1px solid rgba($color: #fff, $alpha: 1); } // 固定表格内的table-body .el-table__fixed-right .el-table__fixed-body-wrapper { height: auto !important; bottom: 5px !important; } // 暗藏固定列表头右侧多出单元格 .el-table .el-table__fixed-right-patch { display: none; } // 革除固定列右侧边框线 .el-table--border .el-table__cell:last-child { border-right: none !important; } // 重置固定列单元格背景色 .el-table__fixed-right td.el-table__cell { background-color: rgb(1, 10, 23); } // 革除单元格最外层 .el-table.el-table--border { border: none; } // 革除单元格初始内边距 .el-table .el-table__cell { padding: unset; } // 革除通明背景下表格底部边框线 .el-table::before { width: 0; } // 清空背景色 .el-table th.el-table__cell, .el-table tr, .el-table, .el-table__expanded-cell { background-color: transparent; } // 非固定列row hover & 固定列row hover .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell, .hover-row td.el-table__cell { background-color: #284866 !important; } // 滚动条列优化 暗藏table gutter列和内容区右侧的空白 .el-table th.gutter { display: none; width: 0; } .el-table colgroup col[name='gutter'] { display: none; width: 0; } //#endregion }</style>
相干链接
- https://element.eleme.cn/#/zh...