Table2.vue_20211217

<template>
    <div>
        <h3>Table2</h3>
        <div >
            <table class="bluetop">
                <thead>
                    <tr>
                        <th>체크</th>
                        <th>ID</th>
                        <th>가격</th>
                        <th>수량</th>
                        <th>할인율</th>
                        <th>합계</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(tmp, idx) in items" v-bind:key="tmp">
                        <td><input type="checkbox" v-model="tmp.chk" /></td>
                        <td> {{ tmp.id }} </td>
                        <td> {{ tmp.price }} </td>
                        <td>  <!-- idx를 통해 숫자를 알려주는거임 -->
                            <select v-model="tmp.count1" @change="handleSelect(idx)">
                                <option v-for="tmp1 in tmp.count" v-bind:key="tmp1">
                                    {{ tmp1 }}
                                </option>
                            </select>
                        </td>
                        <td> {{ tmp.discountrate }}% </td>
                        <td> {{ tmp.total }}원</td>
                    </tr>
                    <!-- <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td> {{ sumTotal }}원 </td>
                    </tr> -->
                </tbody>
            </table>

            <div style="margin-top: 10px; margin-bottom: 50px">
                <input type="button" class="button1" value="삭제" @click="handleDelete()" />
                <input type="button" class="button3" value="복사" @click="handleCopy()" />
                <input type="button" class="button2" value="이동" @click="handleMove()" />
            </div>

            <table class="bluetop">
                <thead>
                    <tr>
                        <th>체크</th>
                        <th>ID</th>
                        <th>가격</th>
                        <th>수량</th>
                        <th>할인율</th>
                        <th>합계</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(tmp, idx) in items1" v-bind:key="tmp">
                        <td><input type="checkbox" v-model="tmp.chk" /></td>
                        <td> {{ tmp.id }} </td>
                        <td> {{ tmp.price }} </td>
                        <td>  <!-- idx를 통해 숫자를 알려주는거임 -->
                            <select v-model="tmp.count1" @change="handleSelect(idx)">
                                <option v-for="tmp1 in tmp.count" v-bind:key="tmp1">
                                    {{ tmp1 }}
                                </option>
                            </select>
                        </td>
                        <td> {{ tmp.discountrate }}% </td>
                        <td> {{ tmp.total }}원</td>
                    </tr>
                    <!-- <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td> {{ sumTotal }}원 </td>
                    </tr> -->
                </tbody>            </table>
        </div>
    </div>
</template>

<script>
    export default {
        created() {
            this.handleData(); // 데이터 호출
        },

        // 리턴값이 있는 계산
        computed: {
            sumPrice() {
                let sum = 0;
                for(let tmp of this.items) {
                    sum += tmp.price;
                }
                return sum;
            },

            sumTotal() {
                let sum = 0;
                for(let tmp of this.items) {
                    sum += tmp.total;
                }
                return sum;
            },
        }, 

        data() {
            return {
                items : [],
                items1: [],
                items2: []
            }
        },

        methods: {
            // 데이터 받기
            handleSelect(idx) {
                // console.log('Table2.vue => handleSelect', idx);
                // console.log(this.items[idx].count1);
                this.items[idx].total =
                    this.items[idx].price * this.items[idx].count1 * (100 - this.items[idx].discountrate) / 100 ;
                    // tmp.total = Math.round(tmp.total); <- 반올림
            },
            handleData() {
                this.items = [
                    { id:'a1', price:200, count:10, discountrate:20 },
                    { id:'a2', price:500, count:15, discountrate:10 },
                    { id:'a3', price:1000, count:20, discountrate:30 },
                ];

                for(let tmp of this.items){ // this.items = tmp
                    tmp['chk'] = false;
                    tmp['count1'] = 0;
                    tmp['total'] = 0;
                    // = tmp.count1 = 0;
                }
            },

            handleDelete() {
                // 기존의 3개에서 false만 찾아서 임시 공간으로 복사해놓고 임시 공간을 items로 데려옴
                let itemTemp = []; // itemTemp = 임시 공간
                for(let tmp of this.items) {
                    if(tmp.chk === false) {
                        itemTemp.push(tmp); // push = 추가하겠다 
                    }
                console.log(itemTemp);
                this.items = itemTemp;
                }
            },

            handleCopy() {
                let itemTemp = []; // itemTemp = 임시 공간
                for(let tmp of this.items) {
                    if(tmp.chk === true) {
                        itemTemp.push( Object.create(tmp) ); 
                        // 복사할땐 Object.create( ) 해야 새로운 개체로 됨
                    }
                tmp.chk = "false";
                this.items1 = itemTemp;
                }
            },

            handleMove() {
                let itemTemp = []; // itemTemp = 임시 공간
                for(let tmp of this.items) {
                    if(tmp.chk === true) {
                        this.items1.push( Object.create(tmp)); // push = 추가하겠다 
                    }
                    else {
                        itemTemp.push( Object.create(tmp));
                    }
                this.items = itemTemp;
                tmp.chk = "false";
                }
            }   
        }
    }
</script>

<style scoped>

</style>