解决vue+elementUI表格数据过多，不想设置max-height属性，制作悬浮横向滚动条滚动表格

前情提要：之前有想过一个悬浮按钮控制表格横向滚动，考古可以参考此文章vue遇到的问题总结归纳的第38条，感觉这个效果还是差点意思，于是改成悬浮滚动条会更好一些，如果有更好的方法实现和解决，希望可以联系我一起交流~

转载还请表明出处，谢谢~

实现原理：在表格底部创建一个滚动条，设置样式为始终固定在窗口底部，监听垂直滚动条，当垂直滚动条滚动至底部时，悬浮按钮消失，反之滚动条出现

1、在template使用将封装好的TableScroll，需传入table的refs，方便后期获取表格的宽度 ：

<TableScroll:tableRef="this.$refs['queryTable']"></TableScroll>

2、在script引用封装好的TableScroll（全局注册就不需要每个页面都引用了，这个根据自己项目选择引用方法）：

import TableScrollfrom "@/components/TableScroll";

components: { TableScroll, },

3、封装好的TableScroll

点击查看代码

<template>
  <!-- 按钮 -->
  <div>
    <div v-show="buttonShow">
      <div
        class="scroll-bottom"
        :style="`width: ${divBodyWidth}px; margin: 0px ${margin}px 0px ${margin}px;`"
        id="scrollBottom"
      >
        <div :style="'width:' + bodyWidth + 'px'"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TableScroll",
  props: {
    tableRef: {
      required: true,
    },
    buttonFlag: {
      default: true,
    },
    margin: {
      default: 20,
    },
  },
  data() {
    return {
      buttonShow: false,
      divBodyWidth: null,
      bodyWidth: null,
      timeFlag: { windowScroll: false, bottomScroll: false },
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.bodyWidth = this.tableRef.$refs.bodyWrapper.scrollWidth;
      this.divBodyWidth = this.tableRef.$el.clientWidth;
    });
    window.addEventListener("scroll", this.listenerWindowScroll);
    document
      .getElementById("scrollBottom")
      .addEventListener("scroll", this.listenerBottomScroll);
    // document
    //   .getElementsByClassName("el-table__body-wrapper")[0]
    //   .addEventListener("scroll", this.listenerTableScroll);
  },

  beforeDestroy() {
    window.removeEventListener("scroll", this.listenerWindowScroll);
    document
      .getElementById("scrollBottom")
      .removeEventListener("scroll", this.listenerBottomScroll);
    // document
    //   .getElementsByClassName("el-table__body-wrapper")[0]
    //   .removeEventListener("scroll", this.listenerTableScroll);
  },

  methods: {
    listenerWindowScroll() {
      let that = this;
      //判断表格有底部滚动条时，才会出现悬浮滚动条
      if (
        that.tableRef.$refs.bodyWrapper.scrollWidth ===
        that.tableRef.$refs.bodyWrapper.clientWidth
      ) {
        that.buttonShow = false;
      } else {
        if (!this.timeFlag.windowScroll) {
          setTimeout(function () {
            that.timeFlag.windowScroll = true;
            if (that.tableRef.$el.clientWidth) {
              // 滚动条距离页面顶部的距离
              let scrollTop = document.documentElement.scrollTop; //滚动条在Y轴上的滚动距离。
              let clientHeight = document.documentElement.clientHeight; //内容可视区域的高度。
              let scrollHeight = document.documentElement.scrollHeight; //内容可视区域的高度加上溢出（滚动）的距离。
              that.buttonShow =
                scrollTop + clientHeight > scrollHeight - 85 ? false : true;
              that.timeFlag.windowScroll = false;
            }
          }, 50);
        }
      }
    },
    listenerBottomScroll() {
      let that = this;
      if (!this.timeFlag.bottomScroll) {
        this.timeFlag.bottomScroll = true;
        //加入延时机制，避免高频触发
        setTimeout(function () {
          if (that.divBodyWidth != that.tableRef.$el.clientWidth) {
            that.divBodyWidth = that.tableRef.$el.clientWidth;
          }
          that.tableRef.$refs.bodyWrapper.scrollLeft =
            document.getElementById("scrollBottom").scrollLeft;
          that.timeFlag.bottomScroll = false;
        }, 50);
      }
    },
  },

  watch: {
    buttonShow(val) {
      if (val) {
        this.$nextTick(() => {
          document.getElementById("scrollBottom").scrollLeft =
            this.tableRef.$refs.bodyWrapper.scrollLeft;
        });
      }
    },
  },
};
</script>

<style>
.scroll-bottom {
  position: fixed;
  bottom: 10px;
  z-index: 999;
  height: 20px;
  overflow-x: scroll;
}
</style>