VueでWEBアプリ(8)

Vuetifyを入れているのにチェックボックスやテキストボックスの実装に使用していなかったことに気づいたので、こちらのブログ記事 を参考に改めて追加してみました。

今回実装してみたのは以下のパーツです。

ボタン・ボタン（角丸）・チェックボックス・ラジオボタン・テキスト入力・パスワード入力・リストボックス・コンボボックス・テキストエリア・テーブル・グリッド

ボタン以下がVuetify使用のパーツ

本当に簡単に、Vuetifyコンポーネントを使用するだけでおしゃれな見た目になって驚きました。

特に驚いたのはテーブル　 <v-data-table>　です。

Row per pageの設定、全体のうちいくつのデータを現在表示しているか、ページ移動　まで付いてくるとは思いませんでした。

しかもそれぞれの列で昇順・降順を変更できるようにもなっています。

特に何のオプションもつけずにこれだけしっかりしたテーブルが作れるのはかなり便利ですよね。

Vuetify公式　を見てみると、ほかにもカスタマイズの余地がありそうなので、今後また触ってみようと思います。