使用v-for 添加多个input框
<el-form-item v-if="rulePowerForm.freightMode==2"> <div v-for="(item,index) in rulePowerForm.logisticsIncrement" :key="index" > <el-form-item required> <el-col :span="10"> <el-form-item label="下单满" prop="satisfyOrder"> <el-input type="text" v-model.number="rulePowerForm.logisticsIncrement[index].satisfyOrder" placeholder="输入数字" style="width:200px" oninput="value=value.replace(/[^\d]/g,'')"></el-input> <span>元,减免</span> </el-form-item> </el-col> <el-col :span="10"> <el-form-item prop="reductionMoney"> <el-input type="text" v-model.number="rulePowerForm.logisticsIncrement[index].reductionMoney" placeholder="输入数字" style="width:200px" oninput="value=value.replace(/[^\d]/g,'')"></el-input> <span>元运费</span> </el-form-item> </el-col> <el-button :size="size" type="primary" @click="addOrderGivenStairArr(index)" v-show="index==0" style="margin-left: 8px;">添加</el-button> <el-button :size="size" type="danger" @click="deelteOrderGivenStairArr(index)" v-show="index != 0">删除</el-button> </el-form-item> </div> </el-form-item>
// 新增物流权益 addOrderGivenStairArr() { if(this.rulePowerForm.logisticsIncrement.length>9){ this.$message({ message: "新增最多不超过十条!", type: "error" }); } this.rulePowerForm.logisticsIncrement.push({}) }, deelteOrderGivenStairArr(index) { this.rulePowerForm.logisticsIncrement.splice(index,1) },
rulePowerForm: {
logisticsIncrement: [{satisfyOrder:"",reductionMoney:""}],
},