两个el-table滚动同步,并且只能滚动固定距离
时间: 2023-07-03 19:19:08 浏览: 59
要实现两个 `el-table` 滚动同步,并且只能滚动固定距离,您可以使用以下步骤:
1. 在两个 `el-table` 的外部包装一个相同的容器,并设置相同的高度和 `overflow-y: auto` 属性,以确保两个表格都可以垂直滚动。
2. 监听容器的 `scroll` 事件,并在回调函数中获取容器的 `scrollTop` 属性。然后,将这个值同步到两个 `el-table` 上。
3. 使用 `sync` 修饰符将两个 `el-table` 的 `scrollTop` 属性绑定到一个变量上,以实现滚动同步。
4. 在 `scroll` 事件回调函数中,您可以通过计算两个 `el-table` 的 `scrollTop` 属性之间的差值,来实现只能滚动固定距离。
下面是一个示例代码:
```html
<template>
<div class="table-container" @scroll="handleScroll">
<el-table :data="tableData1" :height="tableHeight" style="max-height: 400px; overflow-y: auto;" :sync="scrollTopSync">
<!-- 表格列 -->
</el-table>
<el-table :data="tableData2" :height="tableHeight" style="max-height: 400px; overflow-y: auto;" :sync="scrollTopSync">
<!-- 表格列 -->
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData1: [],
tableData2: [],
tableHeight: 0,
scrollTop: 0,
scrollTopSync: null,
scrollDistance: 50 // 滚动固定的距离
};
},
mounted() {
// 计算表格高度
this.tableHeight = document.documentElement.clientHeight - this.$refs.table.$el.offsetTop;
},
methods: {
handleScroll(event) {
// 获取容器滚动距离
const scrollTop = event.target.scrollTop;
// 计算与上次滚动的距离差
const delta = scrollTop - this.scrollTop;
// 如果距离差小于滚动固定的距离,则不执行滚动
if (Math.abs(delta) < this.scrollDistance) {
return;
}
// 更新上次滚动的距离
this.scrollTop = scrollTop;
// 同步滚动距离到另一个表格
this.scrollTopSync = scrollTop;
}
}
}
</script>
```
在上面的示例中,我们将两个 `el-table` 放在一个容器中,并设置容器的高度和 `overflow-y: auto` 属性。然后,在 `mounted` 钩子中计算表格高度。在 `handleScroll` 方法中,我们获取容器的滚动距离,并计算与上次滚动的距离差。如果距离差小于滚动固定的距离,则不执行滚动。最后,我们将滚动距离同步到另一个表格中,以实现滚动同步。