<el-table :data="orders" style="width: 100%;min-height:auto !important;">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="price" label="单价"></el-table-column>
<el-table-column label="数量" width="110">
<template slot-scope="scope">
<el-input-number size="mini" :value="scope.row.value" v-on:input="handleBlur" @change="handleChange( scope.row )"></el-input-number>
</template>
</el-table-column>
<el-table-column label=" " width="30">
<template slot-scope="scope">
<el-button class="btn" plain icon="el-icon-delete" size="mini" @click="delChange( scope.row )"></el-button>
</template>
</el-table-column>
</el-table>
渲染效果:
handleBlur(value){
this.input_number_value = value;
let total=0;
for(let i=0;i<this.orders.length;i++){
total=total+(this.orders[i].price*this.orders[i].value);
}
this.totalprice=total;
},
handleChange( data ) {
data.value = this.input_number_value;
let total=0;
for(let i=0;i<this.orders.length;i++){
total=total+(this.orders[i].price*this.orders[i].value);
}
this.totalprice=total;
},
delChange(index){//删除
for(let i=0;i<this.orders.length;i++){
if(this.orders[i].id==index.id){
this.orders.splice(i, 1);
let seit = this.checkedC.indexOf(index.id);
if (seit > -1) {
this.checkedC.splice(seit, 1);
}
}
}
let total=0;
for(let i=0;i<this.orders.length;i++){
total=total+(this.orders[i].price*this.orders[i].value);
}
this.totalprice=total;
},
Changeimg2(index){
if(this.checkedC.indexOf(index.id)==-1){
this.checkedC.push(index.id);
}
this.orders=[];
for(let j=0;j<this.packData.length;j++){
for(let i=0;i<this.checkedC.length;i++){
if(this.checkedC[i]==this.packData[j].id){
let obj = new Object();
obj.code=this.packData[j].code;
obj.id=this.packData[j].id;
obj.imageUrl=this.packData[j].imageUrl;
obj.name=this.packData[j].name;
obj.price=this.packData[j].price;
obj.stock=this.packData[j].stock;
obj.value=1;
this.$set(this.orders,i, obj);
}
}
}
/* console.log(this.orders); */
let total=0;
for(let i=0;i<this.orders.length;i++){
total=total+(this.orders[i].price*this.orders[i].value);
}
this.totalprice=total;
},
在data中定义数组orders:[ ],在methods为其设置的值要用 this.$set(),来设置,否则会出现增减无效。