如果你不需要其中一个表的滚动条,你可以直接起clas名,然后将滚动条隐藏,反之去掉即可
<template>
<div style="background: #fff;padding:10px">
<el-table :data="tableData" style="width: 500px" ref="firstTable">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址" width="250px">
</el-table-column>
</el-table>
<el-table :data="tableOtherData" style="width: 500px" ref="secondTable" class="Tableone">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址" width="250px">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'demo',
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '大虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '哈哈哈',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '小新',
address: '上海市普陀区金沙江路 1516 弄'
}],
tableOtherData: [{
date: '2016-05-02',
name: '张三',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '张四',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '张五',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '张六',
address: '上海市普陀区金沙江路 1516 弄'
}],
};
},
mounted() {
this.syncScroll()
},
methods: {
syncScroll() {
let firstTable = this.$refs.firstTable.bodyWrapper
let secondTable = this.$refs.secondTable.bodyWrapper
firstTable.addEventListener("scroll", () => {
secondTable.scrollLeft = firstTable.scrollLeft
})
secondTable.addEventListener("scroll", () => {
firstTable.scrollLeft = secondTable.scrollLeft
})
}
}
};
</script>
<style>
.Tableone ::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
display: none;
}
</style>