表格上下滚动条

1.html代码：

<div ref="topScroll" class="top-scroll" @scroll="handleScrollTop"
     v-if="ifRefresh && tableType==='baseAndSpecialTableTitle'">
  <div class="top-scroll-content" :style="tableWidth"></div>
</div>

2.handleScrollTop方法：
tableWidth: {width: 0}

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

3.获取表格异步添加滚动事件：

 getTableData() {
    this.loading = true
    this.tableData = []
    delete this.params.startYear
    delete this.params.endYear
    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
    })
  }

4.css代码：

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

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