element组件table滚动条样式修改

要设置el-table的滚动条样式,如加粗和变黑,可以自定义CSS样式。通过设置.el-table__body-wrapper::-webkit-scrollbar的宽度和颜色来更改滚动条的样式。

示例代码

/* ---el-table滚动条公共样式--- */
.el-scrollbar {
.el-scrollbar__bar.is-horizontal {
  height: 15px;
}
/*-- 横向滚动条 --*/
.el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
  opacity: 1;
  height: 15px;
  border-radius: 2px;
  background-color: rgba(136, 219, 255, 1);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
}
/*-- 纵向滚动条 --*/
.el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
  opacity: 1;
  width: 8px;
  border-radius: 2px;
  background-color: rgba(136, 219, 255, 1);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
}
}

你可能感兴趣的:(vue,html,vue.js,前端,css3)