let f1=null
let s1=null
const firstTable1=ref()
const secondTable1=ref()
const syncScroll=()=> {
console.log(firstTable1.value.$refs.bodyWrapper);
console.log(s1.scrollTop);
f1.addEventListener("scroll", function (e) {
s1.scrollTop = f1.scrollTop
console.log('监听滚动');
})
s1.addEventListener("scroll", function (e){
f1.scrollTop = s1.scrollTop
console.log('监听滚动');
})
}
const findTableBody=(dom)=>{
let a,b,c,d
a = dom.$refs.bodyWrapper
b=a.querySelector('.el-scrollbar')
c=b.querySelector('.el-scrollbar__wrap')
console.log(c);
return c
}
onMounted(() => {
f1= findTableBody(firstTable1.value)
s1= findTableBody(secondTable1.value)
syncScroll()
})
<el-table :data="(tableData[0][0].neiLeft1.borderTask)" style="width: 36.5vw" height="20vh"
:header-cell-style="{ color: '#0052D9' }" ref="firstTable1" >
<el-table-column prop="taskId" label="taskId" width="180" />
<el-table-column label="rtmpUrl" width="250">
<template #default="scope">
<div v-if="scope.row.rtmpUrl">
{{ scope.row.rtmpUrl.split('?')[0].split('/')[5] }}
</div>
</template>
</el-table-column>
<el-table-column prop="action" label="action" />
</el-table>
<el-table :data="tableData[1][0].waiRight1.borderTask" style="width: 36.5vw" height="20vh"
:header-cell-style="{ color: '#0052D9' }" ref="secondTable1">
<el-table-column prop="relayTaskId" label="taskId" width="180" />
<el-table-column label="rtmpUrl" width="250">
<template #default="scope">
<div v-if="scope.row.relayRtmpUrl">
{{ scope.row.relayRtmpUrl.split('?')[0].split('/')[5] }}
</div>
</template>
</el-table-column>
<el-table-column prop="relayAction" label="action" />
</el-table>
vue版本:vue3
element版本:elementPlus2.3.0