el-table滚动条样式修改

CSS3自定义滚动条样式 -webkit-scrollbar

当内容超出容器时，容器会出现滚动条，其自带的滚动条有时无法满足我们审美，那么我们可以通过css伪类来实现对滚动条的自定义。

首先我们要了解滚动条。滚动条从外观来看是由两部分组成：1，可以滑动的部分，我们叫它滑块2，滚动条的轨道，即滑块的轨道，一般来说滑块的颜色比轨道的颜色深。

1.滚动条的css样式主要有三部分组成

1. ::-webkit-scrollbar 定义了滚动条整体的样式
2. ::-webkit-scrollbar-thumb 滑块部分；
3. ::-webkit-scrollbar-thumb 轨道部分；
   如果是整个页面的滚动条风格是一致的，直接改全局的滚动条样式也可以有效果

//滚动条的宽度
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: green;
  border-radius: 4px;
}
//滚动条的滑块
::-webkit-scrollbar-thumb {
  background-color: red;
  border-radius: 4px;
}

2. element-ui中的表格el-table滚动条样式修改

前面加一个表格的类名

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