zoukankan      html  css  js  c++  java
  • 使用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="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="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:""}],
           },
     
  • 相关阅读:
    jQuery事件篇---高级事件
    Cookie处理
    JDBC技术
    JSP行为
    JSP九大内置对象
    JSP指令学习
    Oracle数据库学习之存储过程--提高程序执行的效率
    数据库操作之游标
    PL/SQL编程接触
    数据库数据的查询----连接查询
  • 原文地址:https://www.cnblogs.com/turbozhang/p/12698984.html
Copyright © 2011-2022 走看看