Menu5.vue_20211221

<template>
    <div>
        <h3>admin/Menu5.vue</h3>
        <el-table :data="items" size="mini" style="width: 100%;">
            <!-- items==22라인의 변수 -->
            <el-table-column prop="userid" label="아이디" width="180" />
            <el-table-column prop="username" label="이름" width="180" />
            <el-table-column prop="userage" label="나이" />
            <el-table-column label="버튼">
                <!-- <slot name="default"></slot> -->
                <template #default="scope"> <!-- 정보를 알려면 변수를 지정해야 함 -->
                    <!-- {{scope.$index}}<br /> {{ }} 출력해보는 것임. 번호: $index 임의지정 X
                    {{scope.row}}<br /> 내용: row 임의지정 X  -->
                    <el-button size="mini" type="info">수정</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index)">삭제</el-button>
                </template>
            </el-table-column>
        </el-table>

    <el-dialog v-model="dialogVisible" title="삭제알림" width="30%">   
        <span>정말 삭제하시겠습니까?</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="error" @click="handleDeleteAction()">삭제</el-button>            
                <el-button @click="dialogVisible=false">취소</el-button>
            </span>
        </template>
    </el-dialog>     
    </div>
</template>

<script>
    export default {
        created() {
            this.handleData();
        },

        data() {
            return {
                items: [],
                dialogVisible: false,
                idx: -1, // 첫 삭제 버튼 누를 때 dialog 안에 삭제, 취소 버튼을 위한 변수 만들어야함
            }
        },

        methods: {
            handleDelete(idx) {
                console.log("Menu5.vue => handleDelete", idx);
                this.dialogVisible = true;
                this.idx = idx; 


                // let  tmpItem = [];
                // for(let i=0; i<this.items.length; i++) {
                //     if(i !== idx) {
                //         tmpItem.push(this.items[i]);
                //     }
                // }
                // this.items = tmpItem;

                // let arr = [];
                // arr.push({id:'a', name:'b'}); // 배열에 추가
                // arr.pop() // 배열에서 제거(뒤부터)
                // arr.splice(4, 1); // 배열에서 제거(위치, 개수)
            },

            // 실제 삭제 수행 시 삭제하는 idx를 알 수 없음. 그래서 42라인에 백업해놈
            handleDeleteAction() {
                console.log("Menu5.vue => handleDeleteAction");

                let tmpItem = [];
                for(let i=0; i<this.items.length; i++) {
                    if(i !== this.idx) {
                        tmpItem.push(this.items[i]);
                    }
                }
                this.items = tmpItem;
                this.dialogVisible = false;
            },

            handleData() {
                this.items = [
                    {userid: 'a', username: 'a', userage: 20},
                    {userid: 'b', username: 'b', userage: 21},
                    {userid: 'c', username: 'c', userage: 22},
                    {userid: 'd', username: 'd', userage: 23},

                ];
            }  
        }
    }
</script>

<style scoped>

</style>