【Vue.js】ElementUIでテーブルを作るときにデータを加工したくなった

5807 ワード
vue-cli Vue.js JavaScript moment.js ElementUI JavaScript テキストリンク

はじめに

VueのUIライブラリ「ElementUI」でテーブルを作成するときに、
データを加工しようとしたら少しハマったので今回記事にさせて頂きました。

どうぞよろしくお願いします。

開発環境

  • MacOS
  • vue 2.6.11
  • vuecli 4.4.6
  • element-ui 2.13.2
  • vue-moment 4.1.0
  • moment-timezone 0.5.31

テーブルを作る

とりあえずこんな感じのテーブルを作ります。
コンポーネントについては、公式ドキュメントが参考になります。

<template>
    <div class="result-area">
        <el-table
            :data="tableData">
            <el-table-column
                prop="id"
                label="ID"
                width="100">
            </el-table-column>
            <el-table-column
                prop="name"
                label="ニックネーム"
                width="200">
            </el-table-column>
            <el-table-column
                prop="created_at"
                label="作成日"
                width="200">
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import CommonHelper from '../helper/CommonHelper';

export default {
    mixins: [CommonHelper],
    data() {
        return {
            tableData: [{
                id: 1,
                name: '山田太郎',
                created_at: '2020-07-01 10:00:00'
            }, {
                id: 2,
                name: '鈴木一郎',
                created_at: '2020-07-02 11:00:00'
            }, {
                id: 3,
                name: '菅田将暉',
                created_at: '2020-07-03 12:00:00'
            }]
        };
    }
}
</script>

データを加工して表示

このテーブルの作成日を日本語に直して表示したい。

<template>
    <div class="result-area">
        <el-table
            :data="tableData">
            <el-table-column
                prop="id"
                label="ID"
                width="100">
            </el-table-column>
            <el-table-column
                prop="name"
                label="ニックネーム"
                width="200">
            </el-table-column>
            <el-table-column
                prop="created_at"
                label="作成日"
                width="200">
                <template slot-scope="scope">
                    {{date_format(scope.row.created_at)}}
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

scopeを定義してあげて、date_formatという関数を使用して変換しています。
「scope.row.created_at」の「row」を忘れていて、少しハマってしまいました。
一応関数も書いておきます。

export default {
    methods: {
        date_format(date) {
            let format_date = this.$moment(date);
            format_date.locale('ja');
            return format_date.format('LL');
        }
    }
}

おまけ

この書き方を利用して、こんな感じのもできます。

<template>
    <div class="result-area">
        <el-table
            :data="tableData">
            <el-table-column
                prop="id"
                label="ID"
                width="100">
            </el-table-column>
            <el-table-column
                prop="name"
                label="ニックネーム"
                width="200">
            </el-table-column>
            <el-table-column
                prop="id">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="pushDetail(scope.row.id)">
                        <i class="el-icon-edit-outline"></i>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import CommonHelper from '../helper/CommonHelper';

export default {
    mixins: [CommonHelper],
    data() {
        return {
            tableData: [{
                id: 1,
                name: '山田太郎',
                created_at: '2020-07-01 10:00:00'
            }, {
                id: 2,
                name: '鈴木一郎',
                created_at: '2020-07-02 11:00:00'
            }, {
                id: 3,
                name: '菅田将暉',
                created_at: '2020-07-03 12:00:00'
            }]
        };
    },
    methods: {
        pushDetail(id) {
            console.log(id);
        }
    }
}
</script>

アイコンを押すと、methodsにidを渡すことができます。

おわりに

ElementUIはコンポーネントも豊富で使いやすいのですが、
日本語の記事が少なめなので、もっと記事が増やしていきたいと思います。

よろしければ、フォローお願いします。