2021-04-29

element-ui表格嵌套输入框

代码展示：

                el-form(ref="form" :model="form"  :rules="rules")
					el-table(
						:data="form.tableData"
						style="width: 100%"
						:header-cell-style="{background:'#fafafa',color:'#252525'}"
						row-key="id"
					)
						el-table-column(
							prop="name"
							label="名称"
							width="100"
							align="center"
						)
						el-table-column(
							prop="type"
							label="类型"
							width="100"
							align="center"
						)
							template(slot-scope="scope")
								span(v-if="scope.row.type === 1") 礼品券
								span(v-if="scope.row.type === 2") 代金券
						el-table-column(
							prop="available"
							label="可用(张)"
							width="100"
							align="center"
						)
						el-table-column(
							prop="occupy"
							label="已占用(张)"
							width="100"
							align="center"
						)
						el-table-column(
							prop="amount"
							label="优惠面额"
							width="100"
							align="center"
						)
							template(slot-scope="scope")
								span {{scope.row.amount}}元
						el-table-column(
							prop="threshold_amount"
							label="启用门槛"
							width="120"
							align="center"
						)
							template(slot-scope="scope")
								span 满{{scope.row.threshold_amount}}元可用
						el-table-column(
							prop="expire_type"
							label="有效期"
							width="200"
							align="center"
						)
							template(slot-scope="scope")
								span(v-if="scope.row.expire_type === 1") 无限制
								span(v-if="scope.row.expire_type === 2")
									span {{dateFormat(scope.row)}}
								span(v-if="scope.row.expire_type === 3") 领劵后{{scope.row.days_expire}}天有效
						el-table-column(
							label="发券数/人"
							width="110"
							align="center"
						)
							template(slot-scope="scope")
								el-form-item( :prop="'tableData.'+scope.$index+'.num'" :rules="rules.payloadNum" class='centerInput')
									el-input(
										v-model.number="scope.row.num"
										size="mini"
										placeholder="请输入"
										@blur="oninput(scope.row.available,scope.$index,scope.row.num)"
									)
						el-table-column(
							prop="coupon_sn"
							label="操作"
							align="center"
						)
							template(slot-scope="scope")
								el-link(
									type="primary"
									@click="deletes(scope.$index)"
									:underline="false"
								) 删除
					.button
						el-button(
								type="primary"
								@click="confirmSend"
							) 确定发送

删除方法（通过索引直接删除绑定tableData里的数据）

        deletes(index) {
			this.forms.tableData.splice(index, 1);
		},

表格输入框输入事件oninput，因为我的输入框会有一个验证，不能输入0或者输入比现有数据大的数据

// 用户输入框输入时
oninput(available, index, amount) {
    // 输入框的值
	this.multipleSelections[index].amount = amount;
    // Maxavailable每一行的最大输入数据
	this.Maxavailable = available;
}

验证规则：

rules1: {
		payloadNum: [
		    {
			    required: true, validator: validateNum, trigger: 'blur', message: ''
			},
			{ type: 'number', message: '请填写数字', trigger: 'blur' }
		]
},



const validateNum = (rule, value, callback) => {
	if (value === '' || value === undefined) {
		callback(new Error('请填写发劵数'));
		return;
	}
	if (value > this.Maxavailable || value < 1) {
		callback(new Error('请正确填写'));
		return;
	}
	callback();
};

最后注意，在el-table下加上row-key="id"，否则在进行删除操作时，上一行的错误提示，会在下一行显示