web-dev-qa-db-ja.com

Vue b-tableを取得して、固定ヘッダーで本文をスクロールする方法

現在データベースからのデータの束を表示しているページにb-table要素があります。現時点ではページ付けされていますが、フィードバックによると、すべての情報を1つのスクロールビューに表示したいということです。これは可能ですが、問題は、含むdivを設定してテーブル全体をスクロールすると、列ヘッダーもスクロールして離れてしまうことです。列ヘッダーをそのままにしてテーブル本体だけをスクロールできる方法を見つける必要があります。完全に別個のヘッダーで何かをリギングするのではなく、要素自体の境界内でスクロールできるようにしたいと思います。バックグラウンドでJavascriptリギングの束を備えたボディ。

bootstrap-vue table component のコンポーネント参照の下に、tbodyのカスタムクラスを指定する方法のように見えるtbody-classというプロパティがあることを示しています（狂ったように） 。ただし、このページには使用方法が示されておらず、私の実験では結果が得られていません。

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

この種の問題は この問題のスレッド で解決されたようですが、実際にはどのように解決されたかについては詳しく説明していません。機能が「次のアップデート」に追加されたと記載されていますが、そのコメントに続いてリリースされたバージョンのパッチノートもドキュメントにもその追加についてはまったく記載されていません（前の段落で述べたプロパティを意味する場合を除く）。 CSSセレクターを使用してスタイルをラウンドアバウト方式で適用することについては説明していますが、それを機能させることもできませんでした。 （次の例では、Chromeインスペクターのtbodyには適用されたスタイルがありませんでした。）

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

私が使用しているVueのバージョンは2.2.6です。

htmlcssvue.jsvuejs2bootstrap-vue
6
Abion47

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>
1
Calos

列ヘッダーをそのままにしてテーブル本体だけをスクロールできる方法を見つける必要があります。完全に別個のヘッダーで何かをリギングするのではなく、要素自体の境界内でスクロールできるようにしたいと思います。とバックグラウンドで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テーブルに配置します。

1
jtlindsey