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

#プログラム #JavaScript #Nuxt.js #Vue.js

記事をシェア：

コピー

こんにちは、樋口です。

今回は、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

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

次に実際のライブラリの使用方法について解説していきます。

プロジェクト構成

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

Vueファイル

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

– index.vue

<template>
  <div class="samaple__conntents">
    <div style="margin-top: 20px;">
      <h1>Vue-good-tableプラグインサンプル</h1>
    </div>
    <div style="margin-top: 20px;">
      <div style="width: 50%; margin-left: 23%;">
        <vue-good-table :columns="columns" :rows="rows" />
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import vueGoodTable from 'vue-good-table'
import 'vue-good-table/dist/vue-good-table.css'

Vue.use(vueGoodTable)
export default {
  data() {
    return {
      columns: [
        {
          label: 'Name',
          field: 'name'
        },
        {
          label: '数値',
          field: 'value',
          type: 'number'
        },
        {
          label: '小数点',
          field: 'float',
          type: 'number'
        }
      ],
      rows: [
        { id: 1, name: 'John', value: 20, float: 20.1 },
        { id: 2, name: 'Jane', value: 24, float: 30.3 },
        { id: 3, name: 'Susan', value: 16, float: 20.5 },
        { id: 4, name: 'Chris', value: 55, float: 50.7 }
      ]
    }
  }
}
</script>
<style>
.samaple__conntents {
  margin: 0 auto;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>

８行目：
vue-good-tableを表示する場所となります。
「:columns」「:rows」にそれぞれ、表示する値の設定を行います。
今回は、設定する値を「data()」に記述して表示しています。

１４行目～１８行目：
「vue-good-table」をし応するための初期設定を行います。

２２行目～４３行目：
表示するデータを設定する、変数を定義しています。