el-table 修改滚动条 兼容火狐

el-table 每次数据发生变化 都会重新加载 class

PerfectScrollbar 需要引入这个包
使用方法 v-scrollTab

npm install perfect-scrollbar

import Vue from 'vue'
import PerfectScrollbar from 'perfect-scrollbar'
class scrollTabFunctin {
  constructor () {
    this.perfectScrollbar = null
    this.scrollTabName = ''
  }
  scrollTabHandel (el) {
    let random = function () {
      let result = [];
      for(var i=0;i<4;i++){
        var ranNum = Math.ceil(Math.random() * 25); //生成一个0到25的数字
        result.push(String.fromCharCode(65+ranNum));
      }
      return result.join('');
    }
    this.scrollTabName = `scrollTab_overFlow${random()}`
    el.querySelector('.el-table__body-wrapper').classList.add('scrollTab_overFlow')
    el.querySelector('.el-table__body-wrapper').classList.add(this.scrollTabName)
    this.perfectScrollbar = new PerfectScrollbar( '.' + this.scrollTabName, {
      wheelSpeed: 1,
      wheelPropagation: true,
      minScrollbarLength: 100,
      suppressScrollX: true
    })
  }
  scrollTabUpdate (el) {
    if (el.querySelector('.scrollTab_overFlow')) {
      this.perfectScrollbar.update()
    } else {
      this.scrollTabHandel(el)
    }
  }
}
Vue.directive('scrollTab', {
  bind(el) {
    Vue.nextTick(() => {
      el.perfectScrollbar = null
      el.perfectScrollbar = new scrollTabFunctin()
      el.perfectScrollbar.scrollTabHandel(el)
    })
  },
  update (el) {
    if (el.perfectScrollbar) {
      el.perfectScrollbar.scrollTabUpdate(el)
    } else {
      el.perfectScrollbar = new scrollTabFunctin()
      el.perfectScrollbar.scrollTabHandel(el)
    }
  }
})

css

.scrollTab_overFlow {
  overflow: hidden !important;
  position: relative;
}
.el-table--scrollable-y, .el-table__body-wrapper {
    overflow-y: hidden !important;
  }