bootstrap-vue的b-table多个stickyColumn列堆叠重叠如何解决

问题根因 #

你遇到的重叠问题是3个原因共同导致的：

• b-table默认给所有设置了stickyColumn: true的列都配置了left: 0的粘性定位规则，所有粘性列都对齐到最左侧自然会出现重叠
• 所有粘性列的默认z-index完全相同，视觉上靠左的列会被靠右的粘性列遮挡，就会出现透出效果
• 你把responsive属性直接加在了b-table组件上，会破坏粘性列的定位上下文，进一步加剧错位问题

解决步骤 #

步骤1：调整响应式属性的位置 #

把responsive属性从b-table组件移除，改为给外层div添加原生Bootstrap的table-responsive类，避免影响粘性定位上下文：

<template>
  <div class="table-responsive">
    <b-table
      :items="items"
      :fields="fields"
    />
  </div>
</template>

步骤2：给粘性列单独配置偏移量和层级 #

stickyColumn属性支持传入数字作为该列的左偏移值，越靠右的粘性列偏移值越大，同时给靠左的列设置更高的z-index，保证不会被右侧的粘性列遮挡。
以你的代码为例，假设第一列id宽度为80px，修改fields配置如下：

fields: [
  // 第一列偏移0，z-index最高
  { key: 'id', stickyColumn: 0, isRowHeader: true, variant: 'primary', thClass: 'sticky-z-2', tdClass: 'sticky-z-2' },
  // 第二列偏移量等于第一列宽度，z-index次高
  { key: 'a', stickyColumn: 80, variant: 'info', thClass: 'sticky-z-1', tdClass: 'sticky-z-1' },
  // 剩余非粘性列不变
  'b','c','d','e','f','g','h','i','j','k','l'
]

如果有更多粘性列，只需要依次累加前面所有粘性列的宽度作为当前列的stickyColumn值，z-index依次减1即可。

步骤3：添加层级样式 #

在组件内添加穿透样式，调整粘性列的层级优先级：

<style scoped>
/* 深度选择器穿透bootstrap-vue组件样式 */
/deep/ .sticky-z-2 {
  z-index: 3 !important;
}
/deep/ .sticky-z-1 {
  z-index: 2 !important;
}
</style>

如果你的列宽是自适应的，可以在组件mounted钩子中动态获取前序粘性列的宽度，计算出对应偏移量后再赋值给stickyColumn属性即可。

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