element-ui表格的滾動條樣式修改(當固定table表格高度時默認滾動條樣式太醜)

element-ui表格的滾動條樣式修改

當固定表格的高度時：默認滾動條樣式醜

1. 方法一：
   直接修改表格樣式，這樣的效果可以實現，但是效果不是很好

  .el-table__body-wrapper::-webkit-scrollbar{
     /*width: 0;寬度爲0隱藏*/
    width: 2px;
  }
 .el-table__body-wrapper::-webkit-scrollbar-thumb{
    border-radius: 2px;
    height: 50px;
    background: #eee;
  }
 .el-table__body-wrapper::-webkit-scrollbar-track{
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    background: rgba(0,0,0,0.4);
  }

2. 方法二：基於vue的滾動條組件之–element隱藏組件滾動條scrollbar使用
   在項目中，總是需要用到滾動條，但windows瀏覽器默認的滾動條是很醜的，爲了頁面美觀，可以考慮優化滾動條樣式
   vue Element UI官方文檔上並沒有放出滾動條相關的示例說明，但是實際上是有這麼一個組件的，可查看源碼

<el-scrollbar></el-scrollbar>  將會出現滾動的內容放到上述標籤內就可以了。 

這裏要簡單的設置一下，將標籤的height設爲100%，查看效果的時候，會出現一個橫向的滾動條，如果你不想要橫向的滾動條，使用下面css屬性設置就可以只顯示豎向滾動條。
.el-scrollbar__wrap { overflow-x: hidden; }

爲防止出現默認滾動條，在el-table外套一個div就行了，我之前一直在el-table內寫樣式，所以才一直不行