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

  • 相关阅读:
    短信编码总结
    在Linux下用C语言实现短信收发
    sshd_config配置详解
    SSH的通讯和认证
    linux安装tacacs+服务器
    Tacacs+认证详细调研
    伪分布配置完成启动jobtracker和tasktracker没有启动
    Hadoop学习记录(7)|Eclipse远程调试Hadoop
    Hadoop学习记录(6)|Eclipse安装Hadoop 插件
    Hadoop学习记录(5)|集群搭建|节点动态添加删除
  • 原文地址:https://www.cnblogs.com/zhaoxiaobei/p/9289294.html
Copyright © 2020-2023  润新知