本文主要介绍多个el-table同步滚动条的操作,先看交互效果
交互效果
思路
给每个el-table加个ref唯一标识,在组件挂载完成后触发每个el-table的滚动条的监视方法,把多个el-table的scrollLeft 同步即可完成滚动条同步
- ref
<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="200px">
</el-table-column>
</el-table>
- bodyWrapper
mounted() {
let firstTable = this.$refs.firstTable.bodyWrapper
console.log('this.$refs.firstTable.bodyWrapper',this.$refs.firstTable.bodyWrapper)
},
控制台打印出的ref为firstTable的唯一el-table
下面是完整代码
示例代码
<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">
<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>