element-plus 两个或多个table同步滚动条联动

element-plus 两个或多个表格左右滚动条滑动同步实现逻辑如下

注：上下滚动同步联动一样的逻辑 table节点添加scrollTop赋值即可

案例：

<template>
    ...
    <el-table class="table-async-scroll">
    </el-table>
    <el-table class="table-async-scroll">
    </el-table>
    ...
</template>

<script setup>

...
const tables = ref()
// 同步上下两个表格滚动条
const onTableScroll = (event) => {
    const currentTarget = event.srcElement;
    const scrollLeft = currentTarget.scrollLeft;
    for(let i = 0; i < tables.value.length; i++){
            tables.value[i].scrollLeft = scrollLeft
    }
}
const listenerTableScroll = () => {
    nextTick(() => {
        tables.value = document.querySelectorAll('.table-async-scroll .el-scrollbar__wrap')
        if (tables.value.length) {
            for(let i = 0; i < tables.value.length; i++){
                tables.value[i].addEventListener('scroll', onTableScroll, false)
            }
        }
    })
}

onMounted(() => {
    listenerTableScroll()
})

onUnmounted(() => {
    if (tables.value.length) {
        for(let i = 0; i < tables.value.length; i++){
            tables.value[i].removeEventListener('scroll', onTableScroll)
        }
    }
})

</script>