在el-table上下都添加横向滚动条_eltable横向滚动条

效果图：

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

<div ref="topScroll" class="top-scroll" @scroll="handleScrollTop">
	<div class="top-scroll-content"style="tablewidth">div>
</div>
<el-table ref="multipleTable" data="tableData" style="max-width:100%;color:#3a3b40;">
.....
</el-table>

1
2
3
4
5
6
7

handleScrollTop方法：

data(){
	return{
		tablewidth:{
			width:0
		}
		tableDom:null
	}
}

handleScrollTop() {
  if (this.$refs.topScroll) {
    let scrollLeft = this.$refs.topScroll.scrollLeft
    this.$refs.multipleTable.bodyWrapper.scrollTo(scrollLeft, 0);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

3.顶部滚动条样式：

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

  .top-scroll-content {
    background-color: #fff;
    height: 1px;
  }
}
1
2
3
4
5
6
7
8
9
10