html:
js:
// 列表第一行样式
cellStyle ({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) { // 指定坐标rowIndex :行,columnIndex :列
return 'background:#334356;color:#FFDE2B' // 除了表头第一行的文字,背景颜色
} else if (rowIndex <= 3) {
return 'color:#fff' //前三行的行文字颜色
} else {
return ''
}
}
表格文本实现向下滑动的功能,为el-table标签设置固定高度 height=" " 即可实现滚动条滚动功能;在其中 highlight-current-row 是否显示高亮行,当为true时,也就是图标移动点击当前行,显示当前行的选中样式
css:这部分看看就行,都是关于表格的样式的调整。
// 表格
.el-table {
background-color: #202d3d;
font-size: 22px !important;
margin: 0px 1vw;
}
/* 表格内背景颜色 */
.el-table td, .el-table tr {
background: #202d3d;
height: 4.5vw;
color: #ccc;
box-shadow: inherit;
}
.el-table th {
background: #3d4e62;
height: 46px;
padding: 0;
font-weight: inherit;
color: #fff;
}
.el-table td,.el-table th.is-leaf {
border-bottom: 0.013333rem solid #2f3f52;
}
.el-table__body tr.current-row > td,
.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #334356;
color: #fff;
}
// 滚动条的宽度
.el-table__body-wrapper::-webkit-scrollbar {
width: 6px;
height: 100%;
}
// 滚动条的滑块
.el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #47596f;
border-radius: 3px;
}
.el-table--scrollable-y ::-webkit-scrollbar {
display: block; // 隐藏滚动条
}
.el-table__body {
width: 100% !important;
margin-bottom: 32px;
}
.el-table__body-wrapper {
background: #202d3d;
}
.el-table--border::after {
background-color: rgba(0, 0, 0, 0);
}
.el-table::before{
background: inherit;
}
希望我的愚见能够帮助你哦~,若有不对的地方,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~