zoukankan      html  css  js  c++  java
  • element 表单的input循环生成,并可单个input失去焦点单个验证并保存; (多个表单实例)

    <div class="box_item">
      <el-form ref="aList" :model="form" :rules="formRules" label-width="210px">
        <el-form-item class="itemSty"
          v-for="(items, index) in form.aList"
          :label="items.name"
          :key="items.no"
          :prop="'aList.' + index + '.moneyStr'"
          :rules="formRules.moneyStr">
            <el-input type="text" :maxlength="7" placeholder="0.00-9999" v-model="items.moneyStr">
              <template slot="append">元</template>
            </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="box_item">
      <el-form ref="bList" :model="form" :rules="formRules" label-width="210px">
        <el-form-item class="itemSty"
          v-for="(items, index) in form.bList"
          :label="items.name"
          :key="items.no"
          :prop="'bList.' + index + '.moneyStr'"
          :rules="formRules.moneyStr">
            <el-input type="text" :maxlength="7" placeholder="0.00-9999" v-model="items.moneyStr">
              <template slot="append">元</template>
            </el-input>
        </el-form-item>
      </el-form>
    </div>

    export default {
      data() {
        let _this = this
        let tool = this.tool
        let rule_rentMoney = function(rule,value,callback){
          if(value.length && !tool.validate.money(value) ){
            callback(new Error('请输入整数或小数(小数最多两位)'))
          }else if(value > 9999 ){
            callback(new Error('金额不能大于 9999 元'))
          }else{
            _this.edit(rule.field,value) // 验证通过调用保存方法
            callback()
          }
        }
        return{
          form:{
            aList:[],
            bList:[]
          },
          formRules:{
            moneyStr:[
              { validator: rule_rentMoney, trigger: 'blur' }
            ],
          }

        }
    },
    methods: {
      //清除验证的提示
      clearFn(){
        let that = this
        this.arrValidateKey.map( key =>{
          if(that.$refs[key]){
            that.$refs[key].resetFields();
          }
        })
      },
    }
    }

  • 相关阅读:
    iOS 设计模式-委托模式
    python中时间操作总结
    list、dict、tuple的一些小操作总结
    DataFrame的构建及一些操作
    python连接mysql、oracle小例子
    sqlalchemy 映射的小例子
    crontab定时任务以及其中中文乱码问题
    vs2008试用版的评估期已经结束解决办法
    MongoDB 常用shell命令汇总
    把py文件打成exe
  • 原文地址:https://www.cnblogs.com/zhaoxiaobei/p/9289294.html
Copyright © 2011-2022 走看看