Board.vue_20211216

<template>
<br />
    <div>
        <h3>게시판</h3><hr />
        <el-table :data="items" size="mini" style="width: 100%;">
            <el-table-column type="index" width="50" />
            <el-table-column prop="id" label="아이디" width="180" />
            <el-table-column prop="name" label="이름" width="180" />
            <el-table-column prop="tel" label="전화번호" width="180" />
            <el-table-column prop="email" label="이메일" width="180" />
        </el-table>
            <div class="block">
                <el-pagination layout="prev, pager, next" :total="50" @click="handleBoard(tmp)"></el-pagination>
            </div>


        <table border="1">
            <thead>
                <tr>
                    <th>번호</th>
                    <th>아이디</th>
                    <th>이름</th>
                    <th>전화번호</th>
                    <th>이메일</th>
                </tr>
            </thead>

            <tbody> <!-- 원래 "tmp in items"에서 번호 넣을려면 아래처럼 바꿈 -->
                <tr v-for="(tmp, idx) in items" v-bind:key="tmp">
                    <td>{{(idx + 1)}}</td> <!-- 번호 자동넣기 -->
                    <td>{{tmp.id}}</td>
                    <td>{{tmp.name}}</td>
                    <td>{{tmp.tel}}</td>
                    <td v-text="tmp.email"></td>
                </tr>
            </tbody>
        </table>
        <br />

        <div>
            <label v-for="tmp in pages" v-bind:key="tmp">
                <button @click="handleBoard(tmp)">{{ tmp }}</button>
            </label>
        </div>
    </div>
</template>

<script>
    export default {

        // 생명주기(자동으로 호출되는 역할을 정하는 것)
        created() { // 백엔드에서 필요한 데이터를 받는 시점
            console.log('1. created');
            this.handleBoard(1); // methods 호출. 첫 페이지는 1이니까 1을 넣음

        },
        // mounted() { // 화면의 변화를 주는 시점
        //     console.log('2. mounted');

        // },

        /* 프론트엔드는 상태변수를 바꾸면 페이지가 자동으로 바뀌도록 만들어야 함
        화면을 직접 변화시키는 것이 아님!! */
        // 상태변수(state)
        data() {
            return {
                pages : 5,
                items : [],
            }
        },

        // methods = 무언가에 의해 호출 되어지는 함수
        methods: {
            handleBoard(page) { // 무슨 페이지를 눌러야하는지 알아야 함
                console.log('handleBoard', page);
                // 백엔드에서 데이터를 받음. state변수 items에 데이터를 넣음
                this.items = [
                    {id:'a', name:'가', tel:'010', email:'a@a.com'},
                    {id:'b', name:'나', tel:'011', email:'b@a.com'},
                    {id:'c', name:'다', tel:'012', email:'c@a.com'}
                ]
            }
        }
    }
</script>

<style scoped>
    @import '../assets/css/mystyle1.css';
</style>