vue3中多个表格怎么同时滚动并且固定表头

说明：这里需分为两种情况来做。第一种亲情况就是没有修改过el-table这个组件的样式；第二种情况就是修改过el-table组件的样式。第一种较为简单就简单略过，这里主要提及第二种做法。

1.需求效果

2.第一种没有修改过el-table这个组件的样式的做法

（1）直接看大佬vue2的做法

https://blog.csdn.net/z1761419224/article/details/120510842

（2）以下是vue3写法（可以直接使用看看效果，没效果的就看第二种方法）

3.第二种修改过el-table组件的样式

（1）我这里是修改过el-table的滚动条样式

（2）以下没修改过的

（3）原因分析

从上面两张图片可以看出，它们区别在于输出的（table1Wrapper ）第二级一个事table标签，一个不是table标签。所以像第二种修改过el-table组件样式的就不再适用第一种的写法，因为没有拿对节点，要拿的节点不再是.el-table__body-wrapper而是.el-scrollbar__wrap，其他写法就与第一种写法无异。

（4）实现代码

    
        >
        
        
        
    
    
        
        
        
    
    
        
        
    

onMounted(() => {
    getList(); // 获取列表数据

    setTimeout(() => { // 实现同步竖向滚动
        nextTick(() => {
            let table1Wrapper = document.getElementById('table1').getElementsByClassName('el-scrollbar__wrap')[0]
            let table2Wrapper = document.getElementById('table2').getElementsByClassName('el-scrollbar__wrap')[0]
            let table3Wrapper = document.getElementById('table3').getElementsByClassName('el-scrollbar__wrap')[0]
            console.log("table1Wrapper",table1Wrapper);
            table1Wrapper.addEventListener('scroll', () => {
                table2Wrapper.scrollTop = table1Wrapper.scrollTop;
                table3Wrapper.scrollTop = table1Wrapper.scrollTop;
            })
            table2Wrapper.addEventListener('scroll', () => {
                table1Wrapper.scrollTop = table2Wrapper.scrollTop;
                table3Wrapper.scrollTop = table2Wrapper.scrollTop;
            })
            table3Wrapper.addEventListener('scroll', () => {
                table1Wrapper.scrollTop = table3Wrapper.scrollTop;
                table2Wrapper.scrollTop = table3Wrapper.scrollTop;
            })
        })
    }, 1000);
})

（5）代码说明

1.为什么要放到onMounted里

可以放在一个方法里，但是也需要放在onMounted，这样就可以监听到滚动事件而不需要用watch来监听

2.为什么要使用setTimeout和nextTick

照理来说使用onMounted声明周期就可以了，因为它的作用是挂在后，数据和节点都已经生成；我这里不知道什么原因不使用setTimeout和nextTick就拿不到节点，数据倒是已生成（可能是我把getList(); // 获取列表数据放在了前面）

3.重点

重点在于document.getElementById('table1').getElementsByClassName('el-scrollbar__wrap')[0]获取正确的节点，第一种情况和第二种情况区别在于怎么拿到对的节点

4.总结

说白会出现第一种情况和第二种情况在于节点没有拿对