当前位置：首页 > VUE

vue实现冻结表格列

2026-02-21 11:08:54VUE

冻结表格列的实现方法

在Vue中实现表格列的冻结功能，可以通过CSS和JavaScript结合实现。以下是几种常见的方法：

使用CSS固定定位

通过CSS的position: sticky属性可以轻松实现列的冻结效果。这种方法适用于现代浏览器，实现简单且性能较好。

<template>
  <div class="sticky-table">
    <table>
      <thead>
        <tr>
          <th class="sticky-column">固定列</th>
          <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
          <td class="sticky-column">{{ row.fixed }}</td>
          <td v-for="(cell, cellIndex) in row.cells" :key="cellIndex">{{ cell }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style>
.sticky-table {
  overflow-x: auto;
  max-width: 100%;
}

.sticky-column {
  position: sticky;
  left: 0;
  background-color: white;
  z-index: 1;
}
</style>

使用第三方表格组件

许多流行的Vue表格组件库如Element UI、Ant Design Vue等都内置了冻结列功能。以Element UI为例：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    height="250"
    border>
    <el-table-column
      prop="fixedColumn"
      label="固定列"
      fixed
      width="150">
    </el-table-column>
    <el-table-column
      v-for="item in columns"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label"
      width="120">
    </el-table-column>
  </el-table>
</template>

自定义实现双表格联动

对于更复杂的需求，可以通过创建两个同步滚动的表格来实现冻结列效果：

<template>
  <div class="dual-table-container">
    <div class="fixed-table">
      <table>
        <!-- 固定列内容 -->
      </table>
    </div>
    <div class="scrollable-table" @scroll="handleScroll">
      <table>
        <!-- 可滚动列内容 -->
      </table>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleScroll(event) {
      document.querySelector('.fixed-table').scrollTop = event.target.scrollTop
    }
  }
}
</script>

<style>
.dual-table-container {
  display: flex;
  overflow: hidden;
}

.fixed-table {
  flex-shrink: 0;
  overflow-y: auto;
}

.scrollable-table {
  flex-grow: 1;
  overflow-x: auto;
  overflow-y: auto;
}
</style>