【Vue.js】ElementUI로 테이블을 만들 때 데이터를 가공하고 싶어졌다

소개

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>

아이콘을 누르면 메소드에 ID를 전달할 수 있습니다.

결론

ElementUI는 컴포넌트도 풍부하고 사용하기 쉽지만,
일본어 기사가 적기 때문에 더 기사가 늘려 가고 싶습니다.

원한다면 따라주세요.