Vue中两个el-table同步滚动

ymktchic

已于 2022-12-21 10:00:32 修改

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-12-09 17:39:16 首次发布

本文链接：https://blog.csdn.net/m0_48230043/article/details/128256685

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏


 let f1=null
 let s1=null
 const firstTable1=ref()
 const secondTable1=ref()

  const  syncScroll=()=> {
    console.log(firstTable1.value.$refs.bodyWrapper);
        console.log(s1.scrollTop);
      f1.addEventListener("scroll", function (e) {
        s1.scrollTop = f1.scrollTop
        console.log('监听滚动');
      })
      s1.addEventListener("scroll", function (e){
        f1.scrollTop = s1.scrollTop
        console.log('监听滚动');

      })
    }

    const findTableBody=(dom)=>{
      let a,b,c,d
      a = dom.$refs.bodyWrapper
      b=a.querySelector('.el-scrollbar')
      c=b.querySelector('.el-scrollbar__wrap')
      console.log(c);
      return c
    }

 onMounted(() => {
   
    f1=  findTableBody(firstTable1.value)
     s1= findTableBody(secondTable1.value)
  
 
          syncScroll()
    })

 <el-table :data="(tableData[0][0].neiLeft1.borderTask)" style="width: 36.5vw" height="20vh"
          :header-cell-style="{ color: '#0052D9' }" ref="firstTable1" >
          <el-table-column prop="taskId" label="taskId" width="180" />
          <el-table-column label="rtmpUrl" width="250">
            <template #default="scope">
              <div v-if="scope.row.rtmpUrl">
                {{ scope.row.rtmpUrl.split('?')[0].split('/')[5] }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="action" label="action" />
        </el-table>
        <el-table :data="tableData[1][0].waiRight1.borderTask" style="width: 36.5vw" height="20vh"
          :header-cell-style="{ color: '#0052D9' }" ref="secondTable1">
          <el-table-column prop="relayTaskId" label="taskId" width="180" />
          <el-table-column label="rtmpUrl" width="250">
            <template #default="scope">
              <div v-if="scope.row.relayRtmpUrl">
                {{ scope.row.relayRtmpUrl.split('?')[0].split('/')[5] }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="relayAction" label="action" />
        </el-table>