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

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

В ссылке на компонент компонент таблицы bootstrap-vue он говорит, что есть свойство с именем tbody-class, которое выглядит так, будто это способ указать собственный класс для тела (достаточно безумно). Однако на странице не дается никаких указаний о том, как его использовать, и мои эксперименты не дали никаких результатов:

<b-table 
    tbody-class="my-class"   <- Applies prop to table but not to tbody
    :tbody-class="my-class"  <- Seemingly ignored entirely
>

Похоже, такая проблема была решена в этой теме, но в нем нет подробностей, как она была решена. В нем упоминается, что функциональность была добавлена ​​к «следующему обновлению», но ни в примечаниях к патчу версии, выпущенной после этого комментария, ни в документации это добавление вообще не упоминается (если это не означает свойства, которые я упомянул в предыдущем абзаце). В нем действительно говорится об использовании селекторов CSS для применения стиля окольными путями, но мне также не удалось заставить это работать. (В следующем примере к tbody в инспекторе Chrome не применен стиль.)

.table.my-table > tbody {
    height: 100px;
}

Я использую версию Vue 2.2.6.


html vue.js css vuejs2 bootstrap-vue
person Abion47    schedule 01.03.2018    source источник
comment
Ух, играя с этой скрипкой, таблица просто игнорирует любой CSS, который вы добавляете.   -  person Roy J    schedule 02.03.2018
comment
вы пробовали :tbody-class="'my-class'" или :tbody-class="['my-class']"? Ожидается, что tbody-class будет String or Array   -  person Jacob Goh    schedule 02.03.2018
comment
@JacobGoh :tbody-class="'my-class'" и :tbody-class="['my-class']" оба, кажется, интерпретируются как :tbody-class="my-class". Если я добавлю еще один элемент, например :tbody-class="['my-class','my-other-class']", тогда that, похоже, просто превратится в :tbody-class="my-class,my-other-class". Я думаю, что это именно то, что означает строка или массив.   -  person Abion47    schedule 02.03.2018
comment
(Я не могу публиковать комментарии, поэтому вот ответ) Фиксированные заголовки полезны при прокрутке вниз таблицы, которая длиннее, чем страница. Таблицы загрузочного ремня позволяют полностью избежать прокрутки вниз: разбиение на страницы. Это не отвечает на вопрос, но может решить проблему (со мной).   -  person fredericf    schedule 09.01.2019
comment
@fredericf Второе предложение указывает, что разбиение на страницы нежелательно.   -  person Abion47    schedule 10.01.2019
comment
Похоже, работает: jsfiddle.net/guyzLpsk (последняя версия bootstrap-vue).   -  person Styx    schedule 23.03.2019

Ответы (2)


arrow_upward
2
arrow_downward

Начиная с v2.0.0-rc.28, в поддержку добавлены необязательные реквизиты sticky-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/[email protected]/dist/vue.min.js"></script>
  <script src="//unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

  <link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/dist/bootstrap-vue.min.css" />
</header>

<body>
  <div id="app">
    <b-table sticky-header :items="items" head-variant="light"></b-table>
  </div>
</body>

</html>

person Calos    schedule 05.02.2020

arrow_upward
1
arrow_downward

Мне нужно найти способ прокручивать только тело таблицы, оставляя заголовки столбцов на месте, и я бы предпочел иметь возможность делать это в пределах самого элемента вместо того, чтобы настраивать что-то с полностью отдельным заголовком и тело с кучей риггинга Javascript в фоновом режиме

Я создал пример репозитория, чтобы вы могли увидеть, как заставить его работать (также есть скрытая полоса прокрутки).

Возможно, есть и другие способы сделать то же самое, но я сделал это именно так.

<!-- wrap table in container with class. -->
    <b-container fluid class="table-container">
      <b-table
        :items="items" 
        :fields="fields" 
        caption-top
      >
      </b-table>
    </b-container>

А вот CSS со скрытой полосой прокрутки.

.table-container {
     height: calc(100vh - 450px);
}
 .table-container table {
     display: flex;
     flex-flow: column;
     height: 100%;
     width: 100%;
}
 .table-container table thead {
     flex: 0 0 auto;
     width: 100%;
}
 .table-container table tbody {
     flex: 1 1 auto;
     display: block;
     width: 100%;
     overflow-y: auto;
}
 .table-container table tbody tr {
     width: 100%;
}
 .table-container table thead, .table-container table tbody tr {
     display: table;
     table-layout: fixed;
}
 .table-container table {
     border-collapse: collapse;
}
 .table-container table td, .table-container table th {
     padding: 0.4em;
}
 .table-container table th {
     border: 1px solid black;
     font-size: 0.7vw;
}
 .table-container table td {
     border: 1px solid #e7e1e1;
     font-size: 0.85em;
    /* necessary to set for proper "showing row x of y" calculations if infinate scoll */
     white-space: nowrap;
     text-align: center;
     padding: 10px 5px;
     white-space: nowrap;
     text-overflow: ellipsis;
}
 .table-container table thead {
     border: 2px solid #0F0FA3;
}
 .table-container th {
     background-color: #0F0FA3;
     color: #b5aba4;
     cursor: pointer;
     -webkit-user-select: none;
   -moz-user-select: none !important;
     -ms-user-select: none;
     user-select: none;
}
 .table-container table tbody td {
     padding: 8px;
     cursor: pointer;
}
 .table-container table tbody tr:hover {
     background-color: rgba(168, 168, 239, .5);
}
 .table-container table thead td {
     padding: 10px 5px;
}
 .table-container tr:nth-child(even) {
     background-color: rgba(168, 168, 239, 1);
}

/* START Adjustments for width and scrollbar hidden */
 .table-container th.table-action, .table-container td.table-action {
     width: 5.8vw;
}
 .table-container table thead {
     width: calc(100% - 1px);
}
 .table-container table tbody::-webkit-scrollbar {
     width: 1px;
}
 .table-container table tbody::-webkit-scrollbar {
     width: 1px;
}
 .table-container table tbody::-webkit-scrollbar-thumb {
     width: 1px;
}
/* END Adjustments for width and scrollbar */

Обновление, еще один способ иметь фиксированный заголовок, но очень ограниченный (ref):

Есть несколько способов сделать это ... и кроссбраузерность не всегда гарантируется:

создать класс, скажем, my-table-scroll

table.my-table-scroll,
table.my-table-scroll > thead,
table.my-table-scroll > tbody,
table.my-table-scroll > tfoot,
table.my-table-scroll > tbody > tr,
table.my-table-scroll > thead > tr {
  width: 100%;
  display: block
}
table.my-table-scroll > thead,
table.my-table-scroll > tbody,
table.my-table-scroll > tfoot {
  display: block;
  width: 100%;
  overflow-y: scroll;
}
table.my-table-scroll > thead,
table.my-table-scroll > tfoot {
  height: auto;
}
/* these last two rules you will need to tweak on an as needed basis */
table.my-table-scroll > tbody {
  /* set max height for tbody before it scrolls */
  max-height: 200px;
}
table.my-table-scroll > thead > tr > th,
table.my-table-scroll > thead > tr > td,
table.my-table-scroll > tbody > tr > th,
table.my-table-scroll > tbody > tr > td,
table.my-table-scroll > tfoot > tr > th,
table.my-table-scroll > tfoot > tr > td {
  display: inline-block;
  /* you need to explicitly specify the width of the table cells */
  /* either equal, or specify individual widths based on col index. */
  /* Here, we assume you have 4 columns of data */
  width: 25%;
}
/*
  could use sibling selectors to select specific columns for widths:
  td + td (second column)
  td + td + td (3rd column, etc)
*/

А затем поместите класс на свой b-стол.

person jtlindsey    schedule 04.04.2019