AMG Solution

Vue.jsベースのフレームワーク! Nuxt.jsプラグイン《簡単EXCEL風データ表示》

feels

こんにちは、樋口です。
 
今回は、Nuxt.jsからライブラリを読み込むだけで簡単にEXCELのようなテーブルを表現できるVue-good-tableについてご紹介します。
 

使用するライブラリ

今回は下記ライブラリを使用して説明をしていきます。

Vue.js
2.6.11
Nuxt.js
2.12.2
Vue-good-table
2.20.0

Vue-good-tableの追加

初めにコマンドプロンプトで、使用するNuxt.jsのプロジェクトフォルダまで移動します。
移動後、以下のコマンドを実行します。
 

 npm install –save vue-good-table


 
これで対象のプロジェクトに、ライブラリを追加することができました。
詳しい内容については、公式ページよりご確認ください。
 
次に実際のライブラリの使用方法について解説していきます。

プロジェクト構成

本日使用するプロジェクトの構成を記載します。

 sample-project
   |- .nuxt
   |- assets
   |- components
   |- layouts
   |- middleware
   |- node_modules
   |- pages
     |- table-test
       |- index.vue ← 今回作成Vueファイル
   |- plugins
   |- static
   |- language
   |- store
   |- .editorconfig
   |- .eslintrc.js
   |- .gitignore
   |- .prettierrc
   |- nuxt.config.js
   |- package.json
   |- package-lock.json
   |- README.md
   |- stylelint.config.js

Vueファイル

今回サンプル用に作成した、Vueファイルを下記に記載します。
 
– index.vue

8行目:
vue-good-tableを表示する場所となります。
「:columns」「:rows」にそれぞれ、表示する値の設定を行います。
今回は、設定する値を「data()」に記述して表示しています。
 
14行目~18行目:
「vue-good-table」をし応するための初期設定を行います。
 
22行目~43行目:
表示するデータを設定する、変数を定義しています。

実行結果

最後に

今回紹介したライブラリを使用すれば、簡単に多言語対応を行うことが可能となります。今後多言語対応のページ作る際は、ぜひ試してみてください。
 
今後もNuxt.jsでの便利ライブラリについて紹介していけたらと思っています。
 
それではまた。
 
 
 
 
《関連記事》

feels

HIGUCHI'S BLOG

樋口の記事

樋口の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

日報で業務改善
はじめました。
LOADING