1. 插件
vue3-seamless-scroll
详解及使用
2.js
原文地址，请点我
<template><div><el-table ref="table1" :data="tableData" style="width: 100%; margin-bottom: 20px" height="200px"><el-table-column prop="date" label="Date" width="180"></el-table-column><el-table-column prop="name" label="Name" width="180"></el-table-column></el-table><el-table ref="table2" :data="tableData" style="width: 100%" height="200px"><el-table-column prop="address" label="Address" width="180"></el-table-column><el-table-column prop="tag" label="Tag" width="180"></el-table-column></el-table></div>
</template><script setup>
import { ref, onMounted } from 'vue'
import { ElTable } from 'element-plus'
const table1 = ref(null)
const table2 = ref(null)
let overElement = ""
onMounted(() => {const table1Wrapper = table1.value.$refs.bodyWrapperconst table2Wrapper = table2.value.$refs.bodyWrapperconsole.log("table1Wrapper",table1Wrapper);table1Wrapper.addEventListener('mouseover', () => {overElement = "a"console.log("overElement1",overElement);})table2Wrapper.addEventListener('mouseover', () => {overElement = "b"console.log("overElement2",overElement);})table1Wrapper.addEventListener('scroll', () => {console.log("overElement3",overElement);if (overElement === "a") {console.log("overElement4",overElement);table2Wrapper.scrollTop = table1Wrapper.scrollTop}})table2Wrapper.addEventListener('scroll', () => {console.log("overElement5",overElement);if (overElement === "b") {console.log("overElement6",overElement);table1Wrapper.scrollTop = table2Wrapper.scrollTop}})
})
const tableData = [{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',tag: 'Home',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',tag: 'Office',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',tag: 'Home',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',tag: 'Office'}
]
</script>
