Question

我有一个带有b表的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中定义了一些数据。

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

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

对于高度：在CSS中，将sticky-header道具设置为有效的CSS高度（单位）。例如：

sticky-header="200px"

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

如何调整Bootstrap-Vue表格的高度并使其可固定标题滚动

1 个答案: