elementui 计数器动态渲染无法点击

<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(),来设置,否则会出现增减无效。

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值