[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, 데이터 정의format 함수를 사용하여 변환합니다.
'scope.row.cread 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를methods에 넘길 수 있습니다.
끝말
ElementUI는 구성 요소도 풍부하여 사용하기에 매우 편리하다
일본어 기사가 적어서 더 많이 늘리고 싶어요.
가능하다면 주목해 주세요.