el-table样式的设置

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情况下,不会导致占满整个页面,类似于适配,但是他会导致我的横向滚动条时有时无,解决这个问题就是把两个都写上去了,但是此解决方案充满玄学,为什么会导致这个问题,以及这样写是否合理,暂时没有找到答案

  • 11
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值