vue3+element-Plus表格滚动联动

发布时间 2023-11-17 17:39:11作者: LeeToLee
const Table0 = ref()
const Table1 = ref()

function syncScroll() {
  for (let i = 0; i < compareData.compareInfo.length; i++) {
    let firstTable = Table0.value[i].$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
    let secondTable = Table1.value[i].$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
    firstTable.addEventListener('scroll', () => {
      secondTable.scrollLeft = firstTable.scrollLeft
      secondTable.scrollTop = firstTable.scrollTop
      nextTick(() => {
        Table0.value[i].doLayout()
      })
    })
    secondTable.addEventListener('scroll', () => {
      firstTable.scrollLeft = secondTable.scrollLeft
      firstTable.scrollTop = secondTable.scrollTop
      nextTick(() => {
        Table1.value[i].doLayout()
      })
    })
  }
}

element-Plus组件监听滚动与之前element有区别, Table0.value[i].$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0] 获取表格滚动,监听之