elementui中多个table同步滚动

问题描述

element-admin中同时使用多个table，要求头部固定，给每个并列的table设置max-height，通过监听一侧的table滚动情况去控制另外一侧的table滚动。

问题分析

table分成两部分，左侧是一个table，右侧是有去掉头部的多个table组成（动态生成），想要实现双向滚动要完成3个任务。

• 左侧滚动控制右侧同步滚动
• 右侧一个滚动控制右侧所有同步滚动
• 右侧滚动控制左侧同步滚动

解决问题

重点：通过mouseover事件来开启/停止当前鼠标所在区域的scroll事件，因为同步滚动只能一边跟随另一边滚动，否则两边相互影响会导致滚动条滚动滞留现象。

• 左侧table，若是在不同组件传值可以用vuex

  mounted(){
      let bodyWrapper = this.$refs.floorTableRef.bodyWrapper
      bodyWrapper.addEventListener('mouseover', (e) => {
        this.flag = true // 此处的flag判断是否主动滚动了当前table
        bodyWrapper.addEventListener('scroll', (evt) => {
          if(this.flag) {
            this.scrollTop = evt.target.scrollTop
          }
        })
      })
    }
  

  // 设置滚动高度
  initScroll(val) { 
      this.$nextTick(() => {
          let bodyWrappers = document.querySelector('.h-table .el-table__body-wrapper');
          bodyWrappers.scrollTop = val
      })   
  },
  

• 右侧多table

  mounted() {
      // 监听事件
      let bodyWrappers = document.querySelectorAll('.h-table2 .el-table__body-wrapper');
      
      // 监听鼠标是否在当前table，此处也可以监听一个所有table的父元素
      bodyWrappers.forEach((item) => {
        item.addEventListener('mouseover', (evt) => {
          this.flag = false
        })
      })
      
      // 主动滚动就赋值，否知不赋值
      bodyWrappers.forEach((item) => {
        item.addEventListener('scroll', (evt) => {
          if(!this.flag) {
            this.uscrollTop = evt.target.scrollTop
          }
        }, true)
      })
    },
    methods: {
      // 设置滚动高度
      initScroll(val) {
        this.$nextTick(() => {
          let bodyWrappers = document.querySelectorAll('.h-table2 .el-table__body-wrapper');
          bodyWrappers.forEach((item) => {
            item.scrollTop = val
          })
        })   
      }
   }
  

  衍生问题

  右侧的table出现不能滚动到底部的问题待解决。。