vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3 element-plus表格同步滚动

vue3+element-plus实现两个表格同步滚动功能

作者：mini_055

现在需要两个表格,为了方便对比左右的数据,需要其中一边的表格滚动时,另一边的表格也跟着一起滚动,并且保持滚动位置的一致性,本文给大家介绍vue3+element-plus实现两个表格同步滚动功能,感兴趣的朋友一起看看吧

需求：现在需要两个表格，为了方便对比左右的数据，需要其中一边的表格滚动时，另一边的表格也跟着一起滚动，并且保持滚动位置的一致性。具体如下图所示。

实现步骤：

  1. 确保两个表格的宽度一致：如果两个表格的宽度不一致，可能会导致滚动条的位置不同步。确保两个表格的宽度相同（数据内容超出表格行的宽度可以省略显示）或根据需要调整。

  2. 使用相同的滚动容器：确保两个表格的滚动容器具有相同的高度，这样它们的滚动行为才会同步。

  3. 同步滚动事件：在两个表格上监听滚动事件，并在事件触发时同步另一个表格的滚动位置。

HTML结构：

创建一个包含两个表格的容器，然后给容器一个固定的高度（因为要实现滚动必须要内容超过高度了才会滚动）。

<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="暂无数据"
              />
            </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="暂无数据"
              />
            </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逻辑：

  • 模拟左右表格的数据，初始设置100条。

  • 在两个表格上监听滚动事件，并在事件触发时同步另一个表格的滚动位置。

  • 使用nextTick确保DOM更新完成后再同步滚动位置。

  • setupTableScrollSync 函数通过获取 el-table 的 body 容器，给左右表格的滚动事件绑定同步逻辑，避免循环触发（用 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()
  })
})
// 滚动同步实现
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
  // 解绑旧的监听，防止重复
  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>

想要实现表格同步滚动，其实还有一个办法，就是用一个表格来实现（前提是数据是放在一个数组里的） ，然后中间想要空隙，通过CSS样式为表格的某些行或列添加间隔，这种方法实现简单，无需处理滚动逻辑。如果需要真正的固定列+滚动列效果，推荐用两个表格来实现；如果只是视觉分隔，一个表格来实现更简单。

到此这篇关于vue3+element-plus,实现两个表格同步滚动的文章就介绍到这了,更多相关vue3 element-plus表格同步滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文