el-table实现两个表格同步滚动

Abao

于 2024-09-30 14:36:43 发布

阅读量69

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_72439307/article/details/142656276

版权

<div style="display: flex">
        <el-table
          id="table1"
          :data="tableData1"
          style="width: 100%; height: 200px; overflow-y: auto"
        >
          <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>
        <el-table
          id="table2"
          :data="tableData2"
          style="width: 100%; height: 200px; overflow-y: auto"
        >
          <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>
      </div>

const tableData1 = [
  {
    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'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    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 tableData2 = [
  {
    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'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    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'
  }
]

onMounted(() => {
  
  let table1 = document.getElementById('table1')
  let table2 = document.getElementById('table2')
  let table1dom = table1?.querySelector('.el-scrollbar__wrap')
  let table2dom = table2?.querySelector('.el-scrollbar__wrap')
  table1dom?.addEventListener('scroll', () => {
    table2dom!.scrollTop = table1dom?.scrollTop
  })
  table2dom?.addEventListener('scroll', () => {
    table1dom!.scrollTop = table2dom?.scrollTop
  })
})