Vue3 element-table realizes that the left and right tables are linked together when sliding left and right

renderings

 

 First encapsulate a table.vue

<template>
  <el-table :data="tableData" style="width: 100%" :class="tableClassName" :height="300" ref="multipleTableRef">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
import { onMounted, ref, PropType, watch } from 'vue'
const multipleTableRef = ref<any>()
const scrollTableRef = ref<any>()
const emit = defineEmits(['handleScroll'])

const props = defineProps({
    tableData:{
        type: Array,
        default: []
    },
    scrollValue:{
        type: Number,
        default: 0
    },
    tableClassName:{
        type: String,
        default: ''
    },
})

watch(
    ()=> props.scrollValue,
    newVal =>{
        if(multipleTableRef.value){
            multipleTableRef.value.setScrollLeft(newVal)
        }
    },
    { immediate: true}
)

const syncScroll = () =>{
    scrollTableRef.value = document.querySelector(`.${props.tableClassName} .ep-scrollbar_wrap`)  // .ep-scrollbar_wrap需要你审查滚动条的元素，此处不同版本element-table可能不同
    scrollTableRef.value?.addEventListener('scroll',()=>{ emit('handleScroll',scrollTableRef.value.scrollLeft)})
}

setTimeout(()=>{
    syncScroll()
},1000)
</script>

use

<template>
  <el-row>
    <el-col :span="12">
        <custom-table :tableData="tableData" tableClassName="tableLeftClassName" :scrollValue="scrollTableRight" @handleScroll="handleScrollLeft"/>
    </el-col>
    <el-col :span="12">
        <custom-table :tableData="tableDataRight" tableClassName="tableRightClassName" :scrollValue="scrollTableLeft" @handleScroll="handleScrollRight"/>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { onMounted, ref, PropType, watch } from 'vue'
import customTable from './custom-table.vue'
const scrollTableLeft= ref<number>()
const scrollTableRight= ref<number>()

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const tableDataRight= [
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const handleScrollLeft = (val:number)=>{
    scrollTableLeft.value = val
}

const handleScrollRight= (val:number)=>{
    scrollTableRight.value = val
}

</script>