1.更换表格每行背景颜色
// 设置表头的颜色
/deep/.el-table thead tr>th{
width: 100%;
background-color: rgb(22,18,102);
border: none;
}
// 去除每行的边框
/deep/.el-table tbody tr>td{
// background-color: rgb(26,28,119);
color: #fff;
border: none;
}
// 设置行的背景颜色
::v-deep .el-table tr:nth-child(even) {
background-color: rgb(26,28,119) !important;
}
::v-deep .el-table tr:nth-child(odd) {
background-color: rgb(22,18,102) !important;
}
2.鼠标滑过hover的效果
::v-deep .el-table--enable-row-hover .el-table__body tr:hover >td{
background-color:transparent !important;
}
3.去除所有的边框
/deep/.el-table thead tr>th{
width: 100%;
background-color: rgb(22,18,102);
border: none;
}
// 更改表格每行背景颜色
/deep/.el-table tbody tr>td{
// background-color: rgb(26,28,119);
color: #fff;
border: none;
}
// 去除表格上边框
::v-deep .el-table th.el-table__cell.is-leaf {
border: none !important;
}
// 去除表格下边框
div ::v-deep.el-table::before, .el-table--group::after, .el-table--border::after{
background-color: unset !important;
border: none !important;
}
.el-table{
background-color: rgb(22,18,102);
border: none;
}
4.表格滚动条设置
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的滑块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)
::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
.el-table {
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
width: 3px; /*滚动条宽度*/ //纵向滚动条
height: 6px; /*滚动条高度*/ //横向滚动条
}
/*定义滚动条轨道 内阴影+圆角*/
/deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
box-shadow: 0px 1px 3px #071e4a inset; /*滚动条的背景区域的内阴影*/
border-radius: 10px; /*滚动条的背景区域的圆角*/
background-color: #071e4a; /*滚动条的背景颜色*/
}
/*定义滑块 内阴影+圆角*/
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
box-shadow: 0px 1px 3px #595bbb inset; /*滚动条的内阴影*/
border-radius: 10px; /*滚动条的圆角*/
background-color: rgb(26,28,119); /*滚动条的背景颜色*/
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-corner{
background: rgb(7,30,74);
}
}
如果出现了错位的问题,就是表格的表头和内容错开了,可能是因为在更改滚动条之后,由于滚动条变小,原本的位置空出,在调整样式的时候,把行的样式拉满了,导致内容的行占了原本滚动条的位置,而导致的错位,写样式的时候一点要小心,容易自己给自己挖坑。
还有一个问题,表格,设置高度有两种,在height,和max-height,然后,在height的情况下,我的横线的滚动条可以丝滑的展示,但是会导致在分辨率缩小的时候表格高度占满页面,然后在max-height情况下,不会导致占满整个页面,类似于适配,但是他会导致我的横向滚动条时有时无,解决这个问题就是把两个都写上去了,但是此解决方案充满玄学,为什么会导致这个问题,以及这样写是否合理,暂时没有找到答案