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;
}
}