要实现
两个 `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` 方法中，我们获取容器的滚动距离，并计算与上次滚动的距离差。如果距离差小于滚动固定的距离，则不执行滚动。最后，我们将滚动距离
同步到另一个表格中，以实现滚动
同步。
7400
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
