【Vue.js】vue-good-tableでrowsに関数の結果を入れる

vue.jsを使った画面でテーブルを作成する際、vue-good-tableという非常に便利なモジュールがありますが、

データに関数の結果を入れようとして少し躓いたので、記事に残しておきました。

vue-good-tableで関数のデータを表示
1. rowsにデータを書く、基本的なテーブル表示
2. rowsに関数の結果を入れる場合

vue-good-tableで関数のデータを表示

それでは早速ご紹介します。

まずは基本的なvue-good-tableのテーブル表示です。

rowsにデータを書く、基本的なテーブル表示

こちらの記事を参考にしました。

<vgt.html>

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/vue-good-table@2.16.3/dist/vue-good-table.css" rel='stylesheet'>
    <script src="https://cdn.jsdelivr.net/npm/vue-good-table@2.16.3/dist/vue-good-table.js"></script>
</head>

<body>
    <div id="app">
        <vue-good-table :columns="columns" :rows="rows" />
    </div>

    <script src="vgt.js"></script>
</body>

</html>

<head>の部分でCDNを使ってvue.jsとvue-good-tableを読み込んでいます。

（よくわからない方はそのままコピペでOK！）

<body>の<div id=”app”>～がtable表示の部分ですね。

細かいところはjsファイルで書くのでスッキリしていて良いです。

jsファイルがこちら<vgt.js>

Vue.use(window.vueGoodTable.default);

var app = new Vue({
  el: '#app',
  data:{
    columns: [
      {
        label: 'id',
          field: 'id',
         type: 'number',
      },
        {
          label: 'Name',
          field: 'name',
        },
        {
          label: 'Age',
          field: 'age',
          type: 'number',
        },
        {
          label: 'Created On',
          field: 'createdAt',
          type: 'date',
          dateInputFormat: 'YYYY-MM-DD',
          dateOutputFormat: 'MMM Do YY',
        },
        {
          label: 'Percent',
          field: 'score',
          type: 'percentage',
        },
      ],
      rows: [
        { id:1, name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },
        { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
        { id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
        { id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
        { id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
        { id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
      ]
  }
});

これでhtmlファイルをブラウザで表示させれば以下のようにテーブルが表示されるはずです。

rowsに関数の結果を入れる場合

編集するのはjsファイルのみ。

今回はidをループで回しデータに入れる関数で試します。

<vgt.js>



var app = new Vue({
    el: '#app',
    data: {
        columns: [
            {
                label: 'id',
                field: 'id',
                type: 'number',
            },
            {
                label: 'Name',
                field: 'name',
            },
            {
                label: 'Age',
                field: 'age',
                type: 'number',
            },
            {
                label: 'Created On',
                field: 'createdAt',
                type: 'date',
                dateInputFormat: 'YYYY-MM-DD',
                dateOutputFormat: 'MMM Do YY',
            },
            {
                label: 'Percent',
                field: 'score',
                type: 'percentage',
            },
        ],
        rows: []
    },
    methods: {
        rowData() {
            for (var i = 0; i < 6; i++) {
                this.rows.push(
                    { id: i + 1, name: "John", age: 20, createdAt: '201-10-31:9: 35 am', score: 0.03343 }
                )
            }
        }
    },
    mounted: function () {
        this.rowData()
    }
});

rowsの中身はすべて削除し、空の配列にしてから関数部分でpushしています。

また、関数は”methods:”の項目で記述し、その関数を”moutend:”でマウント時に呼び出しています。

マウントについて詳しくはこちらをご覧ください。

結果がこのようになれば成功です。

以上の方法で、項目をループで回したり、DBからデータを取得していれるという作業が簡単にできます。（他にも方法はあると思いますが。）

同じような疑問をお持ちの方がいればぜひ参考にしてみてください。