html - 如何调整 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

因此，要使其可滚动 - 添加此传递响应属性到 b-table标签。例如:
对于水平滚动:

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

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

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

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

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

对于固定 header :只需传递 fixed元素到 <b-table>标记，例如:

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

对于高度:在您的 CSS 中 - 设置 sticky-header支持带有单位的有效 css 高度。例如:

sticky-header="200px"

有关更多信息:请访问此 doc