如何实现Vue b-table表头固定、表格主体滚动？

嘿，刚好我之前在项目里用Bootstrap Vue的b-table处理过一模一样的需求——要固定表头、只让表格主体滚动，给你几个实用的方案，都是亲测有效的：

方案一：纯CSS实现（最推荐，轻量无依赖） #

b-table渲染后的DOM结构本身就区分了<thead>和<tbody>，我们可以利用这个结构通过CSS来实现固定表头：

首先给表格套一个外层容器，设置固定高度，然后让tbody区域单独滚动，同时保证表头和tbody的列宽对齐：

/* 外层容器，设置你需要的可视高度 */
.table-scroll-container {
  height: 600px; /* 按需调整，比如根据页面布局设为80vh */
  overflow: hidden;
  border: 1px solid #dee2e6; /* 可选，给容器加个边框和表格统一 */
}

/* 让tbody变成可滚动块 */
.table-scroll-container .b-table tbody {
  display: block;
  /* 减去thead的高度，这里假设thead一行是56px，可根据实际调整 */
  max-height: calc(100% - 56px);
  overflow-y: auto;
}

/* 固定thead和tbody的列宽，避免滚动时列不对齐 */
.table-scroll-container .b-table thead,
.table-scroll-container .b-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed; /* 关键：固定列宽布局 */
}

然后在模板里把b-table放进这个容器：

<div class="table-scroll-container">
  <b-table 
    :items="yourLargeDataset" 
    :fields="yourTableFields"
    <!-- 保留你原来的其他属性，比如排序、筛选等 -->
  ></b-table>
</div>

注意点： #

• 如果需要自定义列宽，可以在fields数组里给每个字段设置width属性（比如width: '150px'），或者直接给<th>写CSS宽度，table-layout: fixed会让列宽严格按设置生效。
• 如果你的表头有多行，记得调整calc(100% - Xpx)里的X值，改成表头的总高度。

方案二：用b-table内置的sticky-header属性（最简方案，看版本） #

如果你的Bootstrap Vue版本比较新（大概v2.20+以后），b-table自带了固定表头的特性，只需要开启sticky-header并设置表格的max-height即可：

<b-table 
  :items="yourLargeDataset" 
  :fields="yourTableFields"
  sticky-header
  max-height="600px"
></b-table>

这个方案零额外代码，但要注意检查你的Bootstrap Vue版本，如果版本太低可能没有这个属性。

方案三：自定义拆分表头和tbody（灵活适配特殊场景） #

如果因为现有样式冲突导致上面的方案不好用，你可以手动拆分表头和tbody，利用b-table的插槽来实现：

<div class="table-scroll-container">
  <table class="table">
    <!-- 固定表头 -->
    <thead class="thead-light">
      <tr>
        <th v-for="field in yourTableFields" :key="field.key">
          <!-- 这里可以保留原来的表头功能，比如排序按钮 -->
          {{ field.label }}
          <b-table-sort-icon :field="field.key" v-if="field.sortable"></b-table-sort-icon>
        </th>
      </tr>
    </thead>
    <!-- 可滚动的tbody -->
    <tbody>
      <tr v-for="item in yourLargeDataset" :key="item.id">
        <td v-for="field in yourTableFields" :key="field.key">
          {{ item[field.key] }}
        </td>
      </tr>
    </tbody>
  </table>
</div>

然后同样用方案一里的CSS来设置tbody滚动，这种方式适合需要高度自定义表头样式或功能的场景，但要注意如果原来用了b-table的筛选、排序等内置功能，可能需要手动结合相关组件实现。

额外小提示： #

如果觉得浏览器默认的滚动条不好看，可以自定义滚动条样式：

.table-scroll-container .b-table tbody::-webkit-scrollbar {
  width: 6px;
}
.table-scroll-container .b-table tbody::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.table-scroll-container .b-table tbody::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

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