快捷導航

vue3+element-plus實現(xiàn)兩個表格同步滾動功能

更新時間：2025年06月28日 10:54:56 作者：mini_055

現(xiàn)在需要兩個表格,為了方便對比左右的數(shù)據(jù),需要其中一邊的表格滾動時,另一邊的表格也跟著一起滾動,并且保持滾動位置的一致性,本文給大家介紹vue3+element-plus實現(xiàn)兩個表格同步滾動功能,感興趣的朋友一起看看吧

確保兩個表格的寬度一致：如果兩個表格的寬度不一致，可能會導致滾動條的位置不同步。確保兩個表格的寬度相同（數(shù)據(jù)內(nèi)容超出表格行的寬度可以省略顯示）或根據(jù)需要調(diào)整。
使用相同的滾動容器：確保兩個表格的滾動容器具有相同的高度，這樣它們的滾動行為才會同步。
同步滾動事件：在兩個表格上監(jiān)聽滾動事件，并在事件觸發(fā)時同步另一個表格的滾動位置。

HTML結(jié)構(gòu)：

創(chuàng)建一個包含兩個表格的容器，然后給容器一個固定的高度（因為要實現(xiàn)滾動必須要內(nèi)容超過高度了才會滾動）。

<template>
  <div class="container-box">
    <div class="flex table-box">
      <!-- 左邊表格 -->
      <div class="left-table" ref="leftTableWrapper">
        <el-table
          :data="LeftTableData"
          border
          ref="leftTableRef"
          style="width: 100%"
          height="100%"
          :fit="true"
          header-row-class-name="header-row"
          :cell-style="{
            'font-size': '12px',
            color: '#666666',
            height: '40px',
          }"
        >
          <template #empty>
            <div class="custom-empty">
              <el-empty
                :image="`${$global.imageBaseUrl}/ledger/billProcessing/icon_nodata.png`"
                description="暫無數(shù)據(jù)"
              />
            </div>
          </template>
          <el-table-column
            label="表頭1"
            prop="left1"
            align="center"
            min-width="150"
          />
          <el-table-column
            label="表頭2"
            prop="left2"
            align="center"
            width="100"
          />
        </el-table>
      </div>
      <!-- 右邊表格 -->
      <div class="right-table" ref="rightTableWrapper">
        <el-table
          :data="rightTableData"
          border
          ref="rightTableRef"
          style="width: 100%"
          height="100%"
          :fit="true"
          header-row-class-name="header-row"
          :cell-style="{
            'font-size': '12px',
            color: '#666666',
            height: '40px',
          }"
        >
          <template #empty>
            <div class="custom-empty">
              <el-empty
                :image="`${$global.imageBaseUrl}/ledger/billProcessing/icon_nodata.png`"
                description="暫無數(shù)據(jù)"
              />
            </div>
          </template>
          <el-table-column
            label="表頭1"
            prop="right1"
            align="center"
            min-width="150"
          />
          <el-table-column
            label="表頭2"
            prop="right2"
            align="center"
            width="100"
          />
        </el-table>
      </div>
    </div>
  </div>
</template>

JavaScript邏輯：

模擬左右表格的數(shù)據(jù)，初始設(shè)置100條。
在兩個表格上監(jiān)聽滾動事件，并在事件觸發(fā)時同步另一個表格的滾動位置。
使用nextTick確保DOM更新完成后再同步滾動位置。
setupTableScrollSync 函數(shù)通過獲取 el-table 的 body 容器，給左右表格的滾動事件綁定同步邏輯，避免循環(huán)觸發(fā)（用 isSyncingScroll 標記）。

<script lang="ts" setup>
interface tableInfo {
  left1?: string
  left2?: string
  right1?: string
  right2?: string
}
let LeftTableData = ref<tableInfo[]>([])
let rightTableData = ref<tableInfo[]>([])
const leftTableRef = ref()
const rightTableRef = ref()
const leftTableWrapper = ref()
const rightTableWrapper = ref()
onMounted(() => {
  for (let index = 0; index < 100; index++) {
    let obj = {
      left1: `表${index + 1}`,
      left2: `表${index + 1}-1`,
    }
    let obj2 = {
      right1: `表${index + 1}`,
      right2: `表${index + 1}-1`,
    }
    LeftTableData.value.push(obj)
    rightTableData.value.push(obj2)
  }
  // 表格滾動同步
  nextTick(() => {
    setupTableScrollSync()
  })
})
// 滾動同步實現(xiàn)
let isSyncingScroll = false
function setupTableScrollSync() {
  // 獲取表格body的滾動容器
  const getTableBodyWrapper = (tableRef: any) => {
    // el-table exposes $el, then .querySelector('.el-scrollbar__wrap')
    // 兼容 el-table 2.x/3.x
    if (!tableRef?.value) return null
    // 先找新版class
    let body = tableRef.value.$el.querySelector('.el-scrollbar__wrap')
    if (!body) {
      // 舊版class
      body = tableRef.value.$el.querySelector('.el-table__body-wrapper')
    }
    return body
  }
  const leftBody = getTableBodyWrapper(leftTableRef)
  const rightBody = getTableBodyWrapper(rightTableRef)
  if (!leftBody || !rightBody) return
  // 解綁舊的監(jiān)聽，防止重復
  leftBody.onscroll = null
  rightBody.onscroll = null
  leftBody.onscroll = (e: Event) => {
    if (isSyncingScroll) return
    isSyncingScroll = true
    rightBody.scrollTop = leftBody.scrollTop
    isSyncingScroll = false
  }
  rightBody.onscroll = (e: Event) => {
    if (isSyncingScroll) return
    isSyncingScroll = true
    leftBody.scrollTop = rightBody.scrollTop
    isSyncingScroll = false
  }
}
</script>

CSS 樣式：

<style lang="scss" scoped>
.container-box {
  background-color: #fff;
  border-radius: 4px;
  margin: 16px;
  height: calc(100vh - 100px);
  padding: 24px;
  .table-box {
    height: calc(100% - 465px);
    .left-table {
      margin-right: 16px;
    }
    .left-table,
    .right-table {
      :deep(.header-row th) {
        background-color: #f5f5f5;
        text-align: center;
      }
    }
  }
}
</style>

想要實現(xiàn)表格同步滾動，其實還有一個辦法，就是用一個表格來實現(xiàn)（前提是數(shù)據(jù)是放在一個數(shù)組里的），然后中間想要空隙，通過CSS樣式為表格的某些行或列添加間隔，這種方法實現(xiàn)簡單，無需處理滾動邏輯。如果需要真正的固定列+滾動列效果，推薦用兩個表格來實現(xiàn)；如果只是視覺分隔，一個表格來實現(xiàn)更簡單。

到此這篇關(guān)于vue3+element-plus,實現(xiàn)兩個表格同步滾動的文章就介紹到這了,更多相關(guān)vue3 element-plus表格同步滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: