当前位置：首页 > VUE

vue实现表头固定

2026-02-20 13:12:13VUE

Vue 实现表头固定的方法

使用 CSS 固定表头

通过 CSS 的 position: sticky 属性可以轻松实现表头固定。这种方法不需要额外的 JavaScript 代码，兼容性较好。

<template>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in items" :key="index">
          <td>{{ item.field1 }}</td>
          <td>{{ item.field2 }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped>
.table-container {
  height: 300px;
  overflow-y: auto;
}

thead th {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 10;
}
</style>

使用第三方库

如果需要更复杂的功能（如排序、分页），可以使用第三方表格库如 Element UI 或 VxeTable。

以 Element UI 为例：

<template>
  <el-table
    :data="tableData"
    height="250"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="Date"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Name"
      width="180">
    </el-table-column>
  </el-table>
</template>

动态计算表格高度

对于需要动态计算表格高度的情况，可以通过监听窗口大小变化来调整表格高度。

vue实现表头固定

export default {
  data() {
    return {
      tableHeight: 0
    }
  },
  mounted() {
    this.calculateHeight()
    window.addEventListener('resize', this.calculateHeight)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.calculateHeight)
  },
  methods: {
    calculateHeight() {
      this.tableHeight = window.innerHeight - 200 // 减去其他元素的高度
    }
  }
}