element框架＜el-table＞＜/el-table＞表格滚动条固定位置

在使用el-table的时候，如果表格内的列数太多并且给每列设置了宽度或者有一列或多列进行了固定，当表格宽度超出屏幕宽度时，表格就会出现横向滚动条，这根滚动条不做处理始终会在表格最底部。当表格行数过多时，每次都需要滑到页面最底部才能看到并使用这个横向滚动条，非常麻烦。

目标：将横向滚动条固定在屏幕最底部或者你想要的任何位置

1、在el-table内加入两个自带的固定属性和一个自定义指令

属性：border    scrollbar-always-on

指令：v-scrollbar

 <el-table
    :data="data"
    style="width: 100%"
    border
    scrollbar-always-on
    v-scrollbar
  >

2、定义并导出自定义指定函数

export default function (app) {
  app.directive('scrollbar', {
    mounted(el, binding) {
      const bar = el?.querySelector('.el-scrollbar__bar')
      if (bar && el) {
        bar?.classList?.add('v-scroll__el-scrollbar__bar')
        el?.appendChild(bar)
      }
    },
  })
}

3、在上面自定义指令中有特殊的类名，在最外层的容器中写入Css，

/* table自定义指令样式 */
.v-scroll__el-scrollbar__bar.el-scrollbar__bar {
  z-index: 11;
  overflow-x: hidden;
  position: sticky;
  bottom: 58px;
}

4、完成以上三个步骤，恭喜你成功了！！