vue element-ui el-table 的滚动条联动效果

需求效果如图所示，可以上下  或者左右

  思路：鼠标控制Atable滚动条的时候,

把scrollLeft或者scrollTop赋给Btable,

反之Btable赋给Atable,

一：下面是页面直接展示情况下的写法：

 二：还有一种写在 el-dialog 弹窗里面的 ，如果还是按上面的写会报错，需要修改下

//这是结构
      
        

          

            

              
                
              
            
          
          

            

              
                
              
            
          
        
      


//这是方法
 data() {
      return {
        dialogVisible: false
      };
    },
methods:{
   tableAllScroll() {
      let overElement = "";
      let AA = document.querySelector("#table-list1 .el-table__body-wrapper");
      let BB = document.querySelector("#table-list2 .el-table__body-wrapper");
      // debugger;
      AA.onmouseover = () => {
        overElement = "a";
      };
      BB.onmouseover = () => {
        overElement = "b";
      };
      AA.addEventListener("scroll", () => {
        if (overElement === "a") {
          BB.scrollTop = AA.scrollTop;
          AA.scrollLeft = BB.scrollLeft;
        }
      });
      BB.addEventListener("scroll", () => {
        if (overElement === "b") {
          AA.scrollTop = BB.scrollTop;
          AA.scrollLeft = BB.scrollLeft;
        }
      });
    },
}

watch:{ 
//监听 弹窗的dialogVisible，等弹窗展示出来后，才有dom结构，这时候才能获取到dom，不会报错
    dialogVisible(val) {
      val && this.$nextTick(() => {
        this.tableAllScroll();
      });

    }() {
     this.$nextTick(() => {
        this.tableAllScroll();
      });
    }
}

容易踩坑的就是 之前dialog没显示，就是在mounted里面去获取dom元素，一直报错，解决方法就是监听dialog，当弹出后，dom渲染完了 再去获取就好了