Как настроить высоту таблицы начальной загрузки и сделать ее прокручиваемой с фиксированным заголовком - PullRequest
Новая
       60

Как настроить высоту таблицы начальной загрузки и сделать ее прокручиваемой с фиксированным заголовком

0 голосов
/ 20 сентября 2019

У меня есть div с b-таблицей внутри.Я хочу отрегулировать высоту таблицы и сделать ее прокручиваемой с фиксированным заголовком.Пожалуйста, помогите кому-нибудь.вот мой код.

вот код внутри шаблона: 

<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;
}

1 Ответ

1 голос
/ 20 сентября 2019

Итак, чтобы сделать его прокручиваемым - добавьте этот пропускной элемент в тег 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"

Для получения дополнительной информации посетите этот Документ

...