一、单独修改element-ui中的表格el-table的滚动条样式

方法 1：

  .el-table__body-wrapper{
    background-color: #ddd;
  }
  .el-table__body-wrapper::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
  }

方法 2：

  // 滚动条的宽度
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 8px; // 横向滚动条
    height: 8px; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
  }

二、保持整个页面的滚动条的风格是一致（直接改全局的滚动条样式）

//滚动条的宽度
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: #e4e4e4;
  border-radius: 3px;
}
//滚动条的滑块
::-webkit-scrollbar-thumb {
  background-color: #a1a3a9;
  border-radius: 3px;
}

三、页面内某一组件滚动条样式美化

scroll-bar是需要滚动条组件的元素，类名自定义

.scroll-bar {
  &::-webkit-scrollbar {
    width: 4px; /* 纵向滚动条*/
    height: 5px; /* 横向滚动条 */
    background-color:transparent;
  }
 
  /*定义滚动条轨道 内阴影*/
  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
  }
 
  /*定义滑块 内阴影*/
  &::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    background-color: #296396;
    border-radius: 4px;
  }
}

四、更详细的全局修改滚动条样式

// 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);  //表头的后面小空白颜色修改
  }