contentinokawablogCodeDesignLifeAboutContactホームCodeVuetifyでレスポンシブのテーブルを作るVuetifyでレスポンシブのテーブルを作る公開日:2019/09/12Vuetifyを使ってデータを表示するレスポンシブのテーブルを作成します。vuetifyを使えば、簡単にすばやくサイトを作成できます。最近はテーマなども充実してきて、特に凝ったデザインでない限りはvuetifyを使った方がいいという感じです。最近だとVuetifyのストアでグッズとかも結構出てるんですけど、あんまりおしゃれなものがないのでもう少ししっかり作ってくれたらなって感じはします(笑)。tableを作っていきます。Vuetifyの公式ドキュメントではテーブルの作成までは書いてあるのですが、レスポンシブ対応までは書いてありません。公式ドキュメントVuetifyでレスポンシブのテーブルを作る気軽に使いたい方はCDNで使ってみてください。tableのslotを使いテーブルのコンテンツの内容を書き換えています。classを画面幅によって動的に設定し、表示を変えています。}</script>windowWidth画面幅です。mountedのタイミングで最初の画面幅を入れ、window.onresizeで、resizeされるたびにwindowWidthにwindow.innerWidthが代入されます。それをwatchで監視して、変更があった場合に、screenWidthOverの処理が走ります。600によって条件分岐させています。ここで画面幅によって細かく設定することもできます。難しいことはやっておらず、display:blockをやっているだけです。Vuetifyは日本語の記事が少ないので、しっかりと残していきたいと思います。Nativeを知らなくてもスマホアプリができる?プロフィールこのサイトを運営しているイノカワです。静岡でフリーランスをやっています。コードを書くのが大好き。いろんな技術に触れて日々気づいたこと・感じたこと・詰まったこと・生活のことを書いています。技術においては雑食です。