ElementUI中修改el-table的滚动条样式

注意：本文仅基于webkit引擎浏览器；
如果是火狐浏览器，则是-moz-；

部分webkit引擎浏览器：Google Chrome谷歌浏览器、Safari浏览器、搜狗高速浏览器、QQ浏览器、360极速浏览器等…

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

滚动条从外观来看是由两部分组成：

• 可以滑动的部分滑块；
• 滚动条的轨道，即滑块的轨道。一般来说滑块的颜色比轨道的颜色深。

滚动条的css样式组成部分：

::-webkit-scrollbar         滚动条整体部分
::-webkit-scrollbar-thumb   滚动条里面的滑块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track   滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button  滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece  内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner  边角，即两个滚动条的交汇处
::-webkit-resizer  两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

修改单个滚动条样式

修改全局滚动条样式（推荐）

css部分：
把以下代码放到 index.html 的 css 里面，或者放到 app.vue 的 css 样式里面。

效果：
修改前：

修改后：