vue.js - 为什么我在表中的标题不粘,我正在使用 bootstrap-vue
问题描述
为什么我在表格中的标题不粘,我使用的是 bootstrap-vue。我已经放了一个粘性标题,当我删除粘性标题中的 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>
这是我的桌子,如果我滚动我的标题不要粘住
解决方案
我认为您的版本bootstrap
是问题所在。我为您的问题准备了一个代码片段,您可以看到一切正常。请检查我与您一起导入的版本。
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>
推荐阅读
- powershell - PowerShell如何处理输入提示
- linux - 安装后我无法启动 Neovim
- node.js - 通过 AT+CMGL 命令接收 OTP SMS(例如 Whatsapp)
- discord - bot.wait_for() Discord.py 的问题
- rust - 为什么 BitAnd::bitand() 不允许引用?
- java - 如何将javap的输出获取到多个文本文件
- firefox - if 和 gotoif 在 Selenium IDE 2.9.1 Firefox 27 中突然停止工作
- c++ - 求两个人一起走多远
- python - AttributeError:类型对象“DataFrame”没有属性“pd”
- javascript - React.js:复选框后变量的值已更改但未写入