idx 어렵다
selcount 추가,
total 추가 및 정의
[ {id: }, {id: }, {id: }, {id: }, {id: } ]
형태일때
for(let tmp of this.items){
tmp['age'] = 20;
를 하면
[ {id: age:20}, {id: age:20}, {id: age:20}, {id: age:20}, {id: age:20} ]
이렇게 전 항목에 age:20이 추가된다.
for(let tmp of this.items){
tmp.selcount = 1;
//tmp['selcount] = 1;
// selcount 값 1로 고정
tmp['total'] = tmp.selcount
* tmp.price
* (100 - tmp.discountrate)/100;
tmp.total = Math.round(tmp.total);
// tmp.total의 소숫점 제거
}
// 처음받은값 (4) + 추가 (2)
// {id, price, count, discountrate, selcount, total}
select 부분 @change="handleCheck(idx)" 메소드 추가,
메소드에 수식 정리
정리할때, items[idx].total 등으로 정한다.
======================================
[
{ id:'a1', price:190, count:7, discountrate:10 },
{ id:'a2', price:1390, count:5, discountrate:15 },
{ id:'a3', price:2300, count:4, discountrate:17 },
];
이런 배열 형식일때
idx는 첫번째 항목 ( { id:'a1', price:190, count:7, discountrate:10 } )부터 불러와서 handleCheck(idx)의 연산을 한다. (반복문)
total은
for(let tmp of this.items){
tmp['total'] = tmp.selcount
* tmp.price
* (100 - tmp.discountrate)/100;여기서 추가되었고 정의되었다.
전체 코드
총 합은 Table1.vue 참고해서 만들것!!
<template>
<div class="container">
<table border="1">
<thead>
<tr>
<th>체크</th>
<th>아이디</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 v-text="tmp.id"></td> -->
<td>{{ tmp.id }}</td>
<td v-text="tmp.price"></td>
<td>
<select v-model="tmp.selcount" @change="handleCheck(idx)">
<option v-for="tmp1 in tmp.count" v-bind:key="tmp1">
{{ tmp1 }}
</option>
</select>
<!-- {{ tmp.count }} -->
</td>
<td v-text="tmp.discountrate"></td>
<td>{{tmp.total}}</td>
</tr>
<!-- <tr>
<td>총합</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr> -->
</tbody>
</table>
<hr>
<div style="margin-top:20px; margin-bottom:20px;">
<input type="button" value="삭제" @click="handleDel()" />
<input type="button" value="복사" @click="handleCopy()" />
<input type="button" value="이동" @click="handleMove()" />
</div>
<table border="1">
<thead>
<tr>
<th>체크</th>
<th>아이디</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 v-text="tmp.id"></td> -->
<td>{{ tmp.id }}</td>
<td v-text="tmp.price"></td>
<td>
<select v-model="tmp.selcount" @change="handleCheck(idx)">
<option v-for="tmp1 in tmp.count" v-bind:key="tmp1">
{{ tmp1 }}
</option>
</select>
<!-- {{ tmp.count }} -->
</td>
<td v-text="tmp.discountrate"></td>
<td>{{tmp.total}}</td>
</tr>
<!-- <tr>
<td>총합</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr> -->
</tbody>
</table>
</div>
</template>
<script>
export default {
// 생명주기
created() {
this.handleData();
},
// 리턴값이 있는 계산
computed : {
},
// 상태변수
data() {
return {
items : [],
items1 : [],
}
},
// 메소드
methods : {
handleMove() {
let TempF = [];
for(let tmp of this.items){
// 밑에 테이블에 추가하기
if(tmp.chk === true){
this.items1.push( Object.create (tmp) );
}
else {
// 위에 테이블에 추가하기
TempF.push( Object.create (tmp) );
}
}
console.log(TempF);
this.items = TempF
},
handleCopy() {
let Temp = [];
for(let tmp of this.items){ // 이동 후 복사하면 다 사라짐. 문제해결 해보기
if(tmp.chk === true){
Temp.push( Object.create (tmp) ); //( Object.create (tmp)); 임시변수
}
}
console.log(Temp);
this.items1 = Temp
},
handleDel() {
// 기존에 3개 있던것 중에서 false 인 것을 찾아서
// itemTemp로 복사함
// itemTemp값을 items로 변경
let itemTemp = [];
// [{chk:true}, {chk:false}, {chk:true}] 이런형태
// 지운다 = 3개를 2개로 바꾼다
for(let tmp of this.items){
if(tmp.chk === false){
itemTemp.push(tmp);
}
}
console.log(itemTemp);
this.items = itemTemp
},
// 데이터 받기
// items 상태변수 저장
async handleData() {
this.items = [
{ id:'a1', price:190, count:7, discountrate:10 },
{ id:'a2', price:1390, count:5, discountrate:15 },
{ id:'a3', price:2300, count:4, discountrate:17 },
];
for(let tmp of this.items){
tmp['chk'] = false;
tmp.selcount = 1;
//tmp['selcount] = 1;
tmp['total'] = tmp.selcount * tmp.price * (100 - tmp.discountrate)/100;
tmp.total = Math.round(tmp.total);
// tmp.total의 소숫점 제거
}
// 처음받은값 (4) + 추가 (2) + (1)
// {id, price, count, discountrate, selcount, total}
},
handleCheck(idx) {
this.items[idx].total
= this.items[idx].selcount
* this.items[idx].price
* (100 - this.items[idx].discountrate)/100;
}
// 테이블로 화면만들기
// count select로
// select가 선택되면 total = price * count * (100-discountrate)/100;
}
}
</script>
<style scoped>
@import '../assets/css/mystyle1.css';
</style>
The best