el-table横向滚动条消失，添加自己的滚动条

有些时候element-ui当中的table满足不了我们的需求，特别是对于window用户来说，当表格超出屏幕范围时，才会出现滚动条 或者我们使用fixed的时候滚动条消失的问题

以下是两种解决方案

使用el-table-bar-base第三方库

  开启横向滚动条自适应功能之后，可能会出现滚轮滚动，表格滚动到底部时，滚动条没有复位的情况。此时，鼠标移动（进出表格）即可解决，或者调低 滚轮响应延迟~~

API

props	type	default	explain
fixed	Boolean	false	开启滚动条自适应
bottom	Number	15	滚动条自适应距离窗口底部距离
delay	Number	300(ms)	滚轮响应延迟
static	Boolean	false	静态表格,有预设值的表格请设置此项
native	Boolean	false	设置elTableColumn表格fixed属性必须设置此项还原滚动条，否则fixed 不会生效
height	Number、String	auto	开启纵向滚动功能，数字输入则默认单位px。此功能与 fixed 模式冲突，开启 fixed 模式则会丢弃该参数

如何使用

npm i el-table-bar-base or yarn add el-table-bar-base

引入 

import Vue from 'vue'
import ElTableBar from 'el-table-bar-base'
import 'el-table-bar-base/lib/ElTableBar.css'

import { Scrollbar } from 'element-ui' // 必须引入 Scrollbar 组件才能正常使用

Vue.use(Scrollbar)
Vue.use(ElTableBar)

模板语法使用 

<template>
  <div>
    <el-table-bar>
      <el-table>
        ...
      </el-table>
    </el-table-bar>
  </div>
</template>

在有的项目当中有些element-ui版本过低或者版本过高又不能升级（可能会影响打包），我们可以编写一个滚动条的组件 通过父组件传递  top，width，margin-left 来调整位置

<template>
  <div ref="scrollWrapper" class="custom-scrollbar-wrapper" :style="`top:${-val}px; width: ${width}%; margin-left:${left}px`">
    <div ref="dragBar" class="drag-bar" @mousedown="handleMouseDown"></div>
  </div>
</template>

<script>
export default {
  name: 'CustomScrollbar',
  data() {
    return {
      isDragging: false,
      startX: 0,
      startLeft: 0,
      tableWrapper: null
    };
  },
  props: {
    val: {
      type: Number, // 类型
      default : 0
    },
    width:{
      type: Number, // 类型
      default : 100
    },
    left:{
      type: Number, // 类型
      default : 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initializeScrollbar();
    });
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    initializeScrollbar() {
      const elTable = this.$parent.$el.querySelector('.el-table');
      if (!elTable) return;

      this.tableWrapper = elTable.querySelector('.el-table__body-wrapper');
      if (!this.tableWrapper) return;

      // 监听表格滚动
      this.tableWrapper.addEventListener('scroll', this.syncScrollbar);
    },
    handleResize() {
      this.initializeScrollbar();
    },
    handleMouseDown(event) {
      this.isDragging = true;
      this.startX = event.clientX;
      this.startLeft = parseInt(this.$refs.dragBar.style.left, 10) || 0;
      document.addEventListener('mousemove', this.handleMouseMove);
      document.addEventListener('mouseup', this.handleMouseUp);
    },
    handleMouseMove(event) {
      if (!this.isDragging) return;
      const dx = event.clientX - this.startX;
      const newLeft = this.startLeft + dx;

      // 计算边界
      const maxLeft = this.$refs.scrollWrapper.clientWidth - this.$refs.dragBar.offsetWidth;
      const minLeft = 0;

      // 更新滚动条位置
      if (newLeft > maxLeft) {
        this.$refs.dragBar.style.left = `${maxLeft}px`;
      } else if (newLeft < minLeft) {
        this.$refs.dragBar.style.left = `${minLeft}px`;
      } else {
        this.$refs.dragBar.style.left = `${newLeft}px`;
      }

      // 同步更新表格滚动
      const scrollWidth = this.tableWrapper.scrollWidth - this.tableWrapper.clientWidth;
      const dragBarWidth = this.$refs.scrollWrapper.clientWidth;
      this.tableWrapper.scrollLeft = (newLeft / maxLeft) * scrollWidth;
    },
    handleMouseUp() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.handleMouseMove);
      document.removeEventListener('mouseup', this.handleMouseUp);
    },
    syncScrollbar() {
      if (this.isDragging) return;
      const scrollWidth = this.tableWrapper.scrollWidth - this.tableWrapper.clientWidth;
      const dragBarWidth = this.$refs.scrollWrapper.clientWidth;
      const left = (this.tableWrapper.scrollLeft / scrollWidth) * dragBarWidth;
      this.$refs.dragBar.style.left = `${left}px`;
    }
  }
};
</script>

<style>
.custom-scrollbar-wrapper {
  
  position: relative;
  height: 10px;
  /* 根据需要调整高度 */
  background: #F2F6FC;
  overflow: scroll;
  /*box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
  border-radius: 5px;
  z-index: 100;
}

.drag-bar {
  position: absolute;
  height: 100%;
  background-color: #c1c1c1;
  /* 根据需要调整颜色 */
  cursor: pointer;
  width: 80px;
  /* 初始宽度，需要根据实际情况调整 */
  border-radius: 10px;
}</style>

以上两种解决方案，版本合适直接就可以使用第三方库如果不合适我们使用自己编写的组件就可以解决我们的滚动条消失问题