【Vue.js】 Vuetifyのv-data-tableでスクロールの追従をする はじめに Vue.jsのUIフレームワークとしてVuetityを使用します。 マテリアルデザインを踏襲したボタンやダイアログなどを手早く実装できます。 データテーブルについても、v-data-tableというコンポーネントを用いて実装可能です。 HTMLのtableタグで実装するよりも効率的に、しかも見栄えよく実装可能です。 様々なプロパティを付与し、テーブルの加工ができます。 行いたいこと テーブルのヘッダー部分と1列目の部分をスクロール時に追従させるようなデザイン。 プロパティの中に、fixed-headerという、ヘッダーを画面上部に追従できるものがあるのですが、今回の要件を満たせないため、データテーブル用のCSSを独自で作成する方針をとります。 オレンジ部分をスクロール追従させます。 ソース compornent.vue <template> <div id="list-table"> <v-data-table :headers="dataTableHeaders" :items="dataTableItems" hide-default-header hide-default-footer dense > <template v-slot:header"> <thead> <tr>ヘッダーの各行の内容を記載する</tr> <tr>ヘッダーの各行の内容を記載する</tr> </thead> </template> <template v-slot:body="{ items }"> <tbody> <tr>表の各行の内容を記載する</tr> <tr>表の各行の内容を記載する</tr> </tbody> </template> </v-data-table> </div> </template> <style scoped> /* データテーブルのコンテンツが大きいため、scrollを設定 */ #list-table { overflow: scroll; } /* データテーブルのヘッダー及び、bodyの1行目にスクロール追従を設定 */ #list-table table thead tr th, #list-table table tbody tr th:first-child { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; left: 0; } </style> 上記ソースでは、スクロールの追従ができませんでした。 ちなみに、HTMLのtableタグで作成した表に関しては、上記CSSで上手くいったので、v-data-tableが原因だと予想できます。 原因 v-data-tableの仕様のようで、overflowが設定されているようでした。 こちらの記事にあるように、v-data-tableで作成されるHTMLのクラスに対して、overflowの設定をunsetすることで解決できました。 .v-data-table /deep/ .v-data-table__wrapper { overflow: unset; } /deep/に関して /deep/は、deep selectorと呼ばれるものです。 Vue.jsでは、今回のようにstyleタグにscopeをつけることで、styleをそのコンポーネントのみに適用させることができます。（反対にscopeを付けなかった場合、グローバルなstyleとなり、該当コンポーネント以外にも同名のクラスが存在する場合には、styleが適用されてしまいます） 該当コンポーネントの子コンポーネント（HTMLタグ上では子クラスと同義）にもstyleを適応させたい場合に、deep selectorを用いることで、子コンポーネントにも適用させることができます。 今回に関しては、.v-data-tableが親コンポーネント、.v-data-table__wrapperがその子コンポーネントというように見なされているのだと考えられます。 ちなみに、/deep/については .v-data-table >>> .v-data-table__wrapper { overflow: unset; } のようにも記述できます。 最後に VuetifyはマテリアルUIを踏襲した便利なライブラリですが、 参考資料が少ない部分があるため、 躓いた内容は積極的にアウトプットしていきたいです。

他のタグ AWS Android Docker Git Go iOS Java JavaScript Linux Node.js PHP Python Rails React Ruby Swift TypeScript Vim Vue.js 初心者 集計について 期間: 2021-10-18 ~ 2021-10-19 GitHub スターをもらえるととっても励みになります LGTM 数ランキング ランキングに入る記事が見つかりませんでした。

概要 2021/10/12にNuxt3がリリースされました。 早速触ってみようと思い、今回は最近よくDocker上に開発環境を構築することが多いので、せっかくならNuxtもDocker上に構築しようと思いました。 ただ、初期設定で少し詰まった部分があったので、備忘録もかねてまとめようと思います。 構成 まずは、下記のような構成でファイルを作成します。 nuxt3-docker-app ├ docker-compose.yml ├ node │ └ Dockerfile └ src 各ファイルの準備 Dockerの起動に必要な各ファイルを準備します。 docker-compose.yml 今回はNode.jsのみ使用するので、必要な記述を記載します。 docker-compose.yml version: '3' services: node: build: node volumes: - ./src:/root/src tty: true environment: - CHOKIDAR_USEPOLLING=true ports: - '3000:3000' Dockerfile Node.jsのバージョンとポートを記述します。 Dockerfile FROM node:14.16.1 EXPOSE 3000 Nuxt3をインストールする まずDockerをCompose Upで立ち上げます 次にNode.jsのContainerが起動しているので、Attach Shellします Attach Shellしたら下記コマンドを実行し、作業ディレクトリに移動します cd root/src 下記コマンドを実行します（詳細は公式HPをご参照ください） npx nuxi init 【アプリケーションの名前（今回はappとします）】 下記コマンドでディレクトリを移動します cd app 下記コマンドを実行し、Nuxt3をインストールします npm install インストールが完了したら、下記コマンドを実行し、開発サーバを立ち上げます npm run dev 上手くいけば開発サーバが立ち上がりますが、私は以下のような問題が発生しました。 問題 開発サーバを立ち上げると無限リロードが起こる 開発サーバが立ち上がり、「 http://localhost:3000/ 」にアクセスすると画面は表示されますが、リロードが無限に起こってしまう問題が発生しました。 これでは、まともに開発出来ないので原因を調べたのですが、以下のようなコンソールエラーが発生していました。 WebSocket connection to 'ws://localhost:24678/_nuxt/' failed: 解決方を探してみたのですが、Nuxt3が原因なのか、バンドルに使用しているViteが原因なのかなど原因を解明することは出来ませんでした。 ただ、エラーメッセージに表示されているポートをdocker-compose.ymlに追加することでこの問題が発生しなくなりました。 docker-compose.yml version: '3' services: node: build: node volumes: - ./src:/root/src tty: true environment: - CHOKIDAR_USEPOLLING=true ports: - '3000:3000' - '24678:24678' # 追加 上記のように「- '24678:24678'」を追加後、Docker Restartをして、先ほどと同様に開発サーバを立ち上げると正常に起動していることが確認できました。 成果物 今回作成したものは下記リポジトリにアップしました。