el-table横向滚动条吸底处理方案思路
npm install el-table-horizontal-scroll

一个用于实现 Element UI (Vue 2) 表格的表头吸顶、表尾吸底、滚动条吸底以及高度自适应功能的指令集插件。

安装

npm install @cell-x/el-table-sticky

注册指令

全局注册指令：

import elTableSticky from '@cell-x/el-table-sticky'

Vue.use(elTableSticky)

// 或者

Vue.use(elTableSticky, {
  StickyHeader: {
    // 吸顶偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetTop: 0,
    // 滚动条吸底偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetBottom: 0,
  },
  StickyFooter: {
    // 吸底偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetBottom: 0,
  },
  StickyScroller: {
    // 吸底偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetBottom: 0,
  },
  HeightAdaptive: {
    // 底部偏移量，只能是数字型
    offsetBottom: 0,
  }
})

局部注册指令：

import {
  StickyHeader,
  StickyFooter,
  StickyScroller,
  HeightAdaptive,
} from '@cell-x/el-table-sticky'

export default {
  directives: {
    StickyHeader: new StickyHeader({ offsetTop: 0, offsetBottom: 0 }).init(),
    StickyFooter: new StickyFooter({ offsetBottom: 0 }).init(),
    StickyScroller: new StickyScroller({ offsetBottom: 0 }).init(),
    HeightAdaptive: new HeightAdaptive({ offsetBottom: 0 }).init(),
  }
}

使用

<el-table v-sticky-header>...</el-table>
<el-table v-sticky-footer>...</el-table>
<el-table v-sticky-scroller>...</el-table>
<el-table v-height-adaptive>...</el-table>

说明：

     指令              说明           修饰符               类型                    默认值
v-sticky-header     表头吸顶指令        .always   Object{Number, String}  offsetTop: 0, offsetBottom: 0
v-sticky-footer     表尾合计行吸底指令   .always Object{Number, String}    offsetBottom: 0
v-sticky-scroller   横向滚动条吸底指令   .always Object{Number, String}    offsetBottom: 0
v-height-adaptive   高度自适应指令   -     Object{Number}                  offsetBottom: 0

注意事项：

v-sticky-header 和 v-sticky-footer 已内置滚动条吸底功能，无需重复使用 v-sticky-scroller 指令
当 v-sticky-header 和 v-sticky-footer 同时使用时，滚动条 offsetBottom 以 v-sticky-footer 为准
横向滚动条默认显示方式为 hover，可通过设置修饰符 .always 改为一直显示
v-height-adaptive 指令不依赖于 position: sticky 属性，可单独使用