使用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:""}],
       },
 

 

posted @ 2020-04-14 16:43  turbozhang  阅读(1569)  评论(0编辑  收藏  举报