效果图:
实现方式:
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>
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);
}
}
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
})
}
3.顶部滚动条样式:
/*顶部滚动条*/
.top-scroll {
overflow-x: auto;
overflow-y: hidden;
.top-scroll-content {
background-color: #fff;
height: 1px;
}
}