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();
          }
        })
      },
    }
    }

  • 相关阅读:
    hdu1716排列2(stl:next_permutation+优先队列)
    iOS UIWebView 载入https 网站出现NSURLConnection/CFURLConnection HTTP load failed (kCFStreamErrorDomainSSL,
    C++学习笔记23,类内函数重载
    Java---16---多线程---死锁
    Ubuntu上的Hadoop安装教程
    SAP BAPI一览 史上最全
    python脚本从excel表到处数据,生成指定格式的文件
    hdu 4865 Peter&#39;s Hobby
    【VUE】100. vue踩坑集锦
    【VUE】2.搭建vue脚手架@vue/cli,新建第一个vue项目
  • 原文地址:https://www.cnblogs.com/zhaoxiaobei/p/9289294.html
Copyright © 2011-2022 走看看