第一步：安装 el-table-horizontal-scroll

npm install el-table-horizontal-scroll

第二步：在main.js中注册并使用

import horizontalScroll from 'el-table-horizontal-scroll'
Vue.use(horizontalScroll)

第三步：在vue文件的el-table上添加指令，有两种显示模式‘always’和‘hover’

<el-table :data="data"  v-horizontal-scroll="'always'"></el-table>

第三步：调整滚动条样式

.el-table-horizontal-scrollbar .el-scrollbar__thumb{
  background-color: #A8A8A8;
}

第四步：隐藏el-table自带滚动条并撑满fixed-right的高度

/* 隐藏 el-table 的横向滚动条 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    display: none;
}
/* 对于 Firefox */
::v-deep .el-table__body-wrapper {
    scrollbar-width: none;  /* Firefox */
}
/* 让 el-table__fixed-right 的高度撑满，如果没有设置fixed:right本样式可以不写 */
::v-deep .el-table__fixed-right {
  height: 100% !important; 
}

注意在全局index.css中写入以下样式，否则可能导致mac端不生效

.notShowScroll{
  .el-table-horizontal-scrollbar{
    .is-horizontal{
      opacity: 0 !important;
    }
  }

使用方式：在el-table上加上以下样式即可

:class="{'notShowScroll': noShowScroll}"