如何固定Bootstrap-Vue表格的顶部表头行？

当表格包含大量数据时，固定表头可以提升滚动时的可读性。基于你提供的Vue2.6 + Bootstrap-Vue表格代码，只需简单修改即可实现表头固定效果：

方法一：外层滚动容器 + 内置表头固定属性 #

给表格添加sticky-header属性，并在外层设置固定高度的滚动容器：

<template>
  <!-- 外层容器设置固定高度，超出内容自动滚动 -->
  <div style="height: 400px; overflow-y: auto;">
    <b-table hover :items="items" sticky-header></b-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
        { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
        {
          age: 89,
          first_name: 'Geneva',
          last_name: 'Wilson',
          _rowVariant: 'danger'
        },
        {
          age: 40,
          first_name: 'Thor',
          last_name: 'MacDonald',
          _cellVariants: { age: 'info', first_name: 'warning' }
        },
        { age: 29, first_name: 'Dick', last_name: 'Dunlap' }
        // 可添加更多测试数据验证滚动效果
      ]
    }
  }
}
</script>

方法二：直接给表格设置最大高度 #

无需外层容器，直接给b-table设置max-height属性配合sticky-header：

<template>
  <b-table hover :items="items" sticky-header max-height="400px"></b-table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
        { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
        {
          age: 89,
          first_name: 'Geneva',
          last_name: 'Wilson',
          _rowVariant: 'danger'
        },
        {
          age: 40,
          first_name: 'Thor',
          last_name: 'MacDonald',
          _cellVariants: { age: 'info', first_name: 'warning' }
        },
        { age: 29, first_name: 'Dick', last_name: 'Dunlap' }
      ]
    }
  }
}
</script>

说明 #

• sticky-header是Bootstrap-Vue内置属性，会自动将表头固定在滚动区域顶部，滚动表格内容时表头保持可见。
• 两种方法都能保留原表格的所有样式和功能（如行悬停、行/单元格变体样式）。
• 可根据实际需求调整容器或表格的高度值。

内容的提问来源于stack exchange，提问作者user3848207