如何调整 bootstrap-vue 表的高度并使其可使用固定标题滚动

Question

我有一个带有 b-table 的 div。 我想调整表格的高度并使其可以使用固定标题滚动。 请有人帮忙。 这是我的代码。

这是模板内的代码：

<div class="tbl-barangay">
    <b-table striped hover :items="items" :fields="fields">
        <template v-slot:cell(name)="data">
            <router-link to="/destination">{{ data.value }}</router-link>
        </template>

        <template v-slot:cell(completeaddress)="data">
            {{ data.item.address.street }}, {{ data.item.address.city }}
        </template>
    </b-table>
</div>

这是我的作用域风格：

.tbl-barangay {
    height: 150px !important;
}

Answer 1

因此，为了使其可滚动 - 将这个传递 responsive 属性添加到 b-table 标签。例如：
对于水平滚动：

<b-table responsive :items="items"></b-table>

responsive 只是可滚动类型的一个选项。

对于垂直滚动，使用sticky-headers，例如：

<b-table sticky-header :items="items" head-variant="light"></b-table>

假设您在items 中定义了一些数据。

对于固定标题：只需将fixed 元素传递给<b-table> 标签，例如：

 <b-table fixed responsive :items="items" :fields="fields" ... > 

对于高度：在您的 css 中 - 将 sticky-header 属性设置为带单位的有效 css 高度。例如：

sticky-header="200px"

更多：访问doc