elementui自定义修改el-table表格竖向滚动条的样式

问题描述

当el-table的数据条数过多的时候,我们就要固定el-table的表头,从而实现竖向滚动的效果,不过默认的滚动条样式不太好看,所以我们可以修改一下滚动条的样式。其实很简单,css加上样式设置即可。

修改前的滚动条样式

image

修改语句

// 设置滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 10px;
}
// 设置滚动条的背景色和圆角
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb  {
  background-color: pink;
  border-radius: 8px;
}

修改后的滚动条样式

image

你可能感兴趣的:(elementui自定义修改el-table表格竖向滚动条的样式)