el-table增加顶部滚动条，表格实现上下双滚动条

效果图：

实现方式：
1.加一个div,宽度和表格相同：

handleScrollTop方法：

handleScrollTop() {
  if (this.$refs.topScroll) {
    let scrollLeft = this.$refs.topScroll.scrollLeft
    this.$refs.multipleTable.bodyWrapper.scrollTo(scrollLeft, 0);
  }
}

!
2.监听表格宽度，并给元素和滚动条元素绑定滚动事件：
原理：两个滚动条滚动时，同时控制另一个滚动条滚动。
表格滚动条监听代码：

getTableData() {
  this.loading = true
  this.tableData = []
  achievementsApi.getTableDataApi(this.params).then(res => {
    this.loading = false
    this.tableData = res.data.result.rows
    this.tableTotal = res.data.result.total
    setTimeout(() => {
      if (this.$refs.multipleTable) {
        this.tableWidth.width = this.$refs.multipleTable.bodyWrapper.scrollWidth + 'px'
        this.$refs.multipleTable.doLayout()
        
        //此代码为监听表格滚动条的事件：
        this.tableDom = this.$refs.multipleTable.bodyWrapper
        this.tableDom.addEventListener('scroll', () => {
          // 滚动距离
          let scrollLeft = this.tableDom.scrollLeft
          this.$refs.topScroll.scrollTo(scrollLeft, 0);
        })
      }
    }, 500)
  }).catch(err => {
    this.loading = false
  })
},

顶部滚动条样式：

/*顶部滚动条*/
.top-scroll {
  overflow-x: auto;
  overflow-y: hidden;

  .top-scroll-content {
    background-color: #fff;
    height: 1px;
  }
}