如何在Bootstrap Vue中实现页面滚动时b-table表头吸顶效果

步骤1：给b-table添加自定义类 #

在你原有b-table的class属性中新增sticky-header-table类，修改后代码如下：

<b-table
   style="white-space: nowrap;"
   v-else
   bordered
   hover
   responsive
   class="position-relative mb-0 sticky-header-table"
   :per-page="perPage"
   :current-page="currentPage"
   :items="items"
   :fields="fields"
   :sort-by.sync="sortBy"
   :sort-desc.sync="sortDesc"
   :sort-direction="sortDirection"
   :filter="filter"
   @filtered="onFiltered"
   >
</b-table>

步骤2：添加对应的CSS样式 #

如果是Vue单文件组件的scoped样式，需要加深度选择器，不同Vue版本写法如下：

/* Vue2 scoped 写法 */
/deep/ .sticky-header-table thead th {
  position: sticky;
  top: 0;
  z-index: 1020;
  background-color: #ffffff;
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}

/* 如果开启了responsive属性需要加这段修复sticky失效问题 */
/deep/ .table-responsive {
  overflow-y: unset;
}

/* Vue3 scoped 写法 */
:deep(.sticky-header-table thead th) {
  position: sticky;
  top: 0;
  z-index: 1020;
  background-color: #ffffff;
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}

:deep(.table-responsive) {
  overflow-y: unset;
}

常见参数调整 #

• 如果页面顶部有固定的导航栏，将top属性的值改为导航栏的高度即可，比如导航栏高60px就设置top: 60px
• 检查表格所有父元素不要设置overflow: hidden/auto/scroll，只要有一个父元素设置了非visible的overflow属性，sticky定位就会失效
• 背景色可以根据你的页面主题调整，一定要设置不透明的背景色，否则吸顶时会透出下方的表格内容

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