<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>