为什么我在表中的标题不粘，我正在使用 bootstrap-vue

Question

为什么我在表格中的标题不粘，我正在使用 bootstrap-vue。我已经放了一个sticky-header，当我删除stick-header中的320px时，它会在卡上过期。

<div class="card">
  <div class="card-body">
    <h2 class="card-title text-center">PRODUCTS</h2>
    <div class="row">
      <div class="col-12" style="height: 350px;">
        <b-table
          sticky-header="320px"
          :items="products"
          :fields="table.fields"
          :per-page="table.perPage"
          :current-page="table.currentPage"
          :busy="table.isBusy"
          head-variant="light"
          responsive
        >
          <template #cell(actions)="row">
            <b-button
              size="sm"
              @click="addToOrder(row.item, row.index, $event.target)"
              class="mr-1"
            >
              Add
            </b-button>
          </template>
        </b-table>
      </div>
    </div>
  </div>
</div>
    

这是my table，如果我滚动标题不要粘住

Answer 1

我认为你的bootstrap 的版本是问题所在。我为您的问题准备了一个代码 sn-p，您可以看到一切正常。请检查我与您一起导入的版本。

new Vue({
  el: "#app",
  data() {
    return {
      table: {
        fields: ['heading1', 'heading2', 'heading3'],
        perPage: 30,
        currentPage: 1,
        isBusy: false
      },
      products: [{
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        },
        {
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        },
        {
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        },
        {
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        },
        {
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        },
        {
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        },
        {
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        },
        {
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        },
        {
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        },
        {
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        },
        {
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        },
        {
          heading1: 'table cell',
          heading2: 'table cell',
          heading3: 'table cell'
        }
      ]
    }
  }
});

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">

  <div class="card">
    <div class="card-body">
      <h2 class="card-title text-center">PRODUCTS</h2>
      <div class="row">
        <div class="col-12" style="height: 350px;">
          <b-table sticky-header="200px" :items="products" :fields="table.fields" :per-page="table.perPage" :current-page="table.currentPage" :busy="table.isBusy" head-variant="light" responsive>
            <template #cell(actions)="row">
                <b-button
                  size="sm"
                  @click="addToOrder(row.item, row.index, $event.target)"
                  class="mr-1"
                >
                  Add
                </b-button>
              </template>
          </b-table>
        </div>
      </div>
    </div>
  </div>
</div>