elementui修改el-table的滚动条样式

 //1、 滚动条的宽度

/deep/ .el-table__body-wrapper::-webkit-scrollbar {

  width: 6px; // 横向滚动条

  height: 6px; // 纵向滚动条必写

}

 // 2、定义滚动条轨道 内阴影+圆角

  /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {

    box-shadow: 0px 1px 3px #071e4a inset; /*滚动条的背景区域的内阴影*/

    border-radius: 6px; /*滚动条的背景区域的圆角*/

    background-color: #071e4a; /*滚动条的背景颜色*/

  }

  // 3、定义滑块 内阴影+圆角

  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {

    box-shadow: 0px 1px 3px #00a0e9 inset; /*滚动条的内阴影*/

    border-radius: 10px; /*滚动条的圆角*/

    background-color: #00a0e9; /*滚动条的背景颜色*/

  }

// 4、表头的后面小空白

  /deep/ .el-table__cell.gutter {

    background: rgba(0, 143, 255, 0.5);  //表头的后面小空白颜色修改

  }

自行根据宽高 圆角颜色进行调整

猜你喜欢

转载自blog.csdn.net/weixin_49315886/article/details/129982270
今日推荐