当前位置：首页 > VUE

vue 实现表格固定列

2026-01-23 13:26:40VUE

Vue 实现表格固定列的方法

固定列是表格中常见的需求，通常用于横向滚动时保持关键列（如序号、名称）始终可见。以下是几种实现方式：

使用 Element UI 的固定列功能

Element UI 的 el-table 组件原生支持固定列，通过 fixed 属性即可实现：

vue 实现表格固定列

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="id" label="ID" width="100" fixed></el-table-column>
  <el-table-column prop="name" label="Name" width="120"></el-table-column>
  <!-- 其他列 -->
</el-table>

fixed 可设置为 left 或 right，默认值为 true（左固定）。
需为固定列指定宽度（如 width="100"），否则可能渲染异常。

自定义 CSS 实现固定列

若未使用 UI 库，可通过 CSS 实现固定列效果：

vue 实现表格固定列

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th class="fixed-column">Fixed Header</th>
        <!-- 其他表头 -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="fixed-column">Fixed Cell</td>
        <!-- 其他单元格 -->
      </tr>
    </tbody>
  </table>
</div>

.table-container {
  overflow-x: auto;
  position: relative;
}
.fixed-column {
  position: sticky;
  left: 0;
  background: white;
  z-index: 1;
}

position: sticky 是关键，需配合 left 或 right 指定固定方向。
为固定列添加背景色（如 background: white）避免内容穿透。

使用第三方库（如 VxeTable）

VxeTable 提供更灵活的固定列功能：

<vxe-table :data="tableData">
  <vxe-column field="id" title="ID" fixed="left"></vxe-column>
  <vxe-column field="name" title="Name"></vxe-column>
</vxe-table>

支持多列固定、分组固定等复杂场景。
性能优化较好，适合大数据量表格。

动态固定列的实现

通过监听滚动事件动态切换固定状态：

export default {
  methods: {
    handleScroll(event) {
      const scrollLeft = event.target.scrollLeft;
      this.isFixed = scrollLeft > 100; // 滚动超过100px时固定
    }
  }
}

结合 CSS 类名动态控制 position: sticky 的生效条件。
适用于需要根据交互条件触发固定的场景。