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

element 表单的input循环生成,并可单个input失去焦点单个验证并保存; (多个表单实例)的更多相关文章

  1. php循环生成的表单如何获得其各项值案例

    思路:输入框和按钮是用for循环生成的,不但要获取输入框里的各项值,并且要获取点击按钮的值,要知道是那个按钮被点击了,这里以生成5个为例.如图: 这是提交页面,点击的是“小米”. 这是显示结果,测试显 ...

  2. 031——VUE中表单控件处理之使用vue控制input和textarea表单项

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 循序渐进PYTHON3(十三) --3-- DJANGO之FORM表单(为自动生成的HTML标签添加样式)

    views.py from django.shortcuts import render,HttpResponse from django import forms import json impor ...

  4. GZFramwork数据库层《二》单据表增删改查(自动生成单据号码)

    运行效果: 使用代码生成器(GZCodeGenerate)生成tb_EmpLeave的Model 生成器源代码下载地址: https://github.com/GarsonZhang/GZCodeGe ...

  5. MySQL分库分表环境下全局ID生成方案 转

    在大型互联网应用中,随着用户数的增加,为了提高应用的性能,我们经常需要对数据库进行分库分表操作.在单表时代,我们可以完全依赖于数据库的自增ID来唯一标识一个用户或数据对象.但是当我们对数据库进行了分库 ...

  6. MySQL分库分表环境下全局ID生成方案

    在大型互联网应用中,随着用户数的增加,为了提高应用的性能,我们经常需要对数据库进行分库分表操作.在单表时代,我们可以完全依赖于数据库的自增ID来唯一标识一个用户或数据对象.但是当我们对数据库进行了分库 ...

  7. 【转】MySQL分库分表环境下全局ID生成方案

    转载一篇博客,里面有很多的知识和思想值得我们去思考. —————————————————————————————————————————————————————————————————————— 在大 ...

  8. laravel基础课程---14、表单验证(lavarel如何进行表单验证)

    laravel基础课程---14.表单验证(lavarel如何进行表单验证) 一.总结 一句话总结: lavarel的验证的功能比tp要[简单]且[强大]很多 直接控制器中:添加[规则数组]和[修改提 ...

  9. 分库分表之后全局id咋生成?

    1.面试题 分库分表之后,id主键如何处理? 2.面试官心里分析 其实这是分库分表之后你必然要面对的一个问题,就是id咋生成?因为要是分成多个表之后,每个表都是从1开始累加,那肯定不对啊,需要一个全局 ...

随机推荐

  1. oracle 报错:ORA-02019 未找到数据库的连接说明

    一.问题描述 我之前连的是别的数据库,现在更换了数据库的连接,然后就报了如下的错误: 我使用的是NHibernate,我找到映射文件后发现我用了dblink,代码中table="COM_OR ...

  2. java 获取网络地址图片

    收藏一个获取网络图片的方法. //获取网络图片 public void ImageRequest(String ImageName,String GifUrl) throws Exception { ...

  3. 《Unity系列》Json文件格式的解析——初级教程

    Json作为轻量级的数据交换格式,被广泛应用于网络数据传输中.相关的解析工具层出不穷,一般掌握一个工具的应用其他的相应工具就能立马学会. 这里以C#中的LitJson为例给大家示范一下解析工具的用法. ...

  4. shiro 配置导图

    1 web.xml配置:shiro filter必须放在其他filter之前 <filter> <filter-name>shiroFilter</filter-name ...

  5. Notes about Vue Style Guide

    A. Necessary Multiple-word for component’s name Data for component must be a function The definition ...

  6. 洛谷P1970 花匠(dp)

    题意 题目链接 Sol 直接用\(f[i][0/1]\)表示到第\(i\)个位置,该位置是以上升结尾还是以下降结尾 转移的时候只需枚举前一个即可 #include<cstdio> #inc ...

  7. IE浏览器下的渐变背景

    background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);(标准) linear-gradient 在 ie9 以下是不支持的,所 ...

  8. Android 自定义AlertDialog的写法和弹出软键盘和覆盖状态栏

    private void showMyDialog(int layoutId){ AlertDialog myDialog = new AlertDialog.Builder(context).cre ...

  9. dispatchTouchEvent,onTouchEvent与onInterceptTouchEvent

    1.首先明白一个常识:View 没有onInterceptTouchEvent事件,而ViewGroup这三个事件都有,是viewgroup继承View之后才加了一个方法叫onIntercepTouc ...

  10. matlab练习程序(Hilbert图像置乱)

    正好刚写了Hibert生成曲线,不如再加一篇应用的程序. 关于Hilbert图像置乱,我在网上搜的应用领域主要集中在数字水印和图像加密上,而这两个领域我都没怎么接触过. 大部分的图像置乱都是如下图的置 ...