1-问题描述

不知道大家在使用el-table时有没有遇到这样的问题，表格比较长也比较宽，想横向滚动表格时还要去表格底部找下方的横向滚动条，那么我们可不可以在el-table自定义上方滚动条呢，答案是可以的

2-理论研究

首先思考可不可以通过纯css实现呢，代码如下

.table-box {
  overflow-x: auto;
  position: relative;
  width:100%;
  transform: scaleY(-1);
}

.table-content{
  width:1995px;
  transform: scaleY(-1);
}

可以看到如下图所示，使用位移把原本在下方的滚动条翻转上来，效果是有，但是有空白，可能是由于el-table的fixed=“right”造成的，而且这样下方就没滚动条了，顾此失彼啊

飞书20220729-171146.jpg

那我们看方案二，在表格同级的地方安插一个滚动元素，监听它的滚动，然后获取它的滚动距离再控制下方滚动条的滚动距离，这样可以吗，请看：

是不是感觉非常的amzing！而且没有空白，下方的滚动条也还在，并且会跟踪上方滚动条滚动，代码放在下面，注释非常清楚哈

<div class="table-box">
        // 安插的滚动元素
        <div class="table-content">
          <div class="controlx" ref="scrollview">
            <div class="son"> </div>
          </div>
          // 实际表格
          <el-table border :data="list" tooltip-effect="dark" style="width:100%"
            @selection-change="handleSelectionChange" ref="sss">

.controlx {
  .son {
    // 该宽度为表格实际宽度，本来应该通过js获取但是el-table表格固定父元素100%宽，子元素超过则滚动
    width: 1995px;
    height: 4px;
  }
  overflow-x: auto;
  visibility: hidden;
}
.table-box {
  overflow-x: hidden;
  position: relative;

  // width:100%;
  // transform: scaleY(-1);
  :hover {
    .controlx {

      visibility: visible;

    }
  }
}

mounted() {
    // 监听滚动
    const scrollview = this.$refs['scrollview']
    scrollview.addEventListener('scroll', this.handleScroll, true)
  },
beforeDestroy() {
    // 移除事件
    const scrollview = this.$refs['scrollview']
    scrollview.removeEventListener('scroll', this.handleScroll, true);
  },
handleScroll() {
      // 需要监听的上方滚动条
      const scrollview = this.$refs['scrollview']
      // console.log(scrollview.scrollLeft)
      let left = scrollview.scrollLeft
      // 表格的原有下方滚动条
      const scrollTable = this.$refs['sss']
      scrollTable.setScrollLeft(left)
    },

可能有人问我为什么滚动条这么炫酷，同样css代码放在下方

::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 14px;
  }

  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background-color: #02adf7;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  }

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #1b5aa9;
  }

el-table添加上方横向滚动条

1-问题描述

2-理论研究