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:""}],
           },
     
  • 相关阅读:
    RabbitMQ
    连接池,为什么要使用连接池?
    mac 安装arcanist
    感触
    UDP socket
    Servlet过滤器
    PL、SQL
    springmvc 文件上传实现(不是服务器的)
    注解spring
    excel工具类
  • 原文地址:https://www.cnblogs.com/turbozhang/p/12698984.html
Copyright © 2011-2022 走看看