如何在没有列变量的情况下使用 bootstrap-vue 粘性列

Question

为了更好地解释问题，我使用 bootstrap-vue 的文档做了一个例子：

<template>
  <div>
    <div class="mb-2">
      <b-form-checkbox v-model="stickyHeader" inline>Sticky header</b-form-checkbox>
      <b-form-checkbox v-model="noCollapse" inline>No border collapse</b-form-checkbox>
    </div>
    <b-table
      :sticky-header="stickyHeader"
      :no-border-collapse="noCollapse"
      responsive
      :items="items"
      :fields="fields"
      head-variant="dark"
      striped
 >
      <!-- We are using utility class `text-nowrap` to help illustrate horizontal scrolling -->
      <template v-slot:head(id)="scope">
        <div class="text-nowrap">Row ID</div>
      </template>
      <template v-slot:head()="scope">
        <div class="text-nowrap">
          Heading {{ scope.label }}
        </div>
      </template>
    </b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        stickyHeader: true,
        noCollapse: false,
        fields: [
          /* THIS IS THE LINE I CHANGE */
          { key: 'id', stickyColumn: true, variant: 'none'},
          'a',
          'b',
          'c',
          'd',
          'e',
          'f',
          'g',
          'h',
          'i',
          'j',
          'k',
          'l'
        ],
        items: [
          { id: 1, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 2, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 3, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 4, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 5, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 6, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 7, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 8, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 9, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
          { id: 10, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 }
        ]
      }
    }
  }
</script>

我直接从 bootstrap-vue 文档 here 中提取了一些小模块。我将 head-variant 更改为 "dark"（不是默认值），并使 table 变成条纹状。对于粘性列，我尝试了 3 种不同的方法：
1.

{ key: 'id', stickyColumn: true, variant: 'none'} // note 'none' is not actually a variant

2.

{ key: 'id', stickyColumn: true, variant: 'secondary'}

3.

{ key: 'id', stickyColumn: true}

每个变体的问题：
1. 粘性列被视为透明并导致列重叠难看
2. 我想保持条纹图案而不求助于 mono-toned 背景
3. 由于某种原因，列的 header-variant 变回默认值

目标：
我想要保持 dark-header，但列样式为 3.

的东西

感谢您的帮助。

Answer 1

我遇到了同样的问题并解决了覆盖这些 css 类:

  td.b-table-sticky-column {
    background-color: inherit;
  }

  .table-striped tbody tr:nth-of-type(odd) {
      background-color: #f0f0f1!important; /* ~ RGBA(0,0,0,.5) on RGB */
  }
  
  .table-striped tbody tr{
    background-color: #ffffff!important;
  }

然后列的背景色采用条纹行的背景色。

我使用的是 table-light，但只需更换您正在使用的那个即可。

如何在没有列变量的情况下使用 bootstrap-vue 粘性列

How to use bootstrap-vue sticky columns without a column variant

css

vue.js

bootstrap-4

bootstrap-vue