我在页面上有一个 b-table 元素，该元素当前显示数据库中的一堆数据。目前它是分页的，但反馈表明他们宁愿将所有信息显示在一个 ScrollView 中。我可以这样做，但问题是，如果我设置一个包含 div 的内容来滚动整个表格，它也会将列标题滚动掉。我需要找到一种方法来只滚动表格主体，同时将列标题留在原处，我更愿意能够在元素本身的范围内完成它，而不是用完全独立的标题来装配一些东西和 body 在后台有一堆 Javascript 操纵。
在bootstrap-vue table component的组件引用下，它说有一个名为 tbody-class 的属性，它看起来像是一种为 tbody 指定自定义类的方法(足够疯狂)。但是，该页面没有给出任何关于如何使用它的指示，我的实验也没有产生任何结果:
<b-table
tbody-class="my-class" <- Applies prop to table but not to tbody
:tbody-class="my-class" <- Seemingly ignored entirely
>
听起来此类问题已在 this issue thread 上得到解决，但它并没有真正详细说明如何它是如何解决的。它提到该功能已添加到“下一个更新”，但在该评论之后发布的版本的补丁说明和文档都没有提到该添加(除非它意味着我在上一段中提到的属性)。它确实讨论了使用 CSS 选择器以迂回的方式应用样式，但我也无法让它工作。 (在以下示例中，Chrome 检查器中的 tbody 没有应用样式。)
.table.my-table > tbody {
height: 100px;
}
我使用的 Vue 版本是 2.2.6。
最佳答案
自 v2.0.0-rc.28 , 可选 Prop sticky-header已添加以支持固定 header 。
new Vue({
el: '#app',
data: {
items: [
{ 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' }
],
}
});<html>
<header>
<script src="//unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.0.0/dist/bootstrap-vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@2.0.0/dist/bootstrap-vue.min.css" />
</header>
<body>
<div id="app">
<b-table sticky-header :items="items" head-variant="light"></b-table>
</div>
</body>
</html>关于html - 如何让 Vue b-table 滚动带有固定标题的正文，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49056361/