<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. nyoj 546——Divideing Jewels——————【dp、多重背包板子题】

    Divideing Jewels 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 Mary and Rose own a collection of jewells. ...

  2. 认识Spring AOP

    Spring AOP AOP是Aspect/'æspekt/ Oriented/ɔːrɪentɪd/ Programming的缩写,意为:面向切面编程. 是什么 通过预编译方式和运行期动态代理实现程序 ...

  3. 怎样在vs2013和vs2015中实现自动编译sass

    Visual Studio不论是2013版本还是2015版本要自动编译都需要添加扩展. 添加扩展的方法,路径“工具”->“扩展和更新”,在打开的窗口“搜索”你需要的扩展根据提示“下载”和“安装” ...

  4. Java—IO流 File类的常用API

    File类 1.只用于表示文件(目录)的信息(名称.大小等),不能用于文件内容的访问. package cn.test; import java.io.File; import java.io.IOE ...

  5. Android学习——Fragment静态加载

    从今天开始做一套安卓的学习笔记,开发环境是Android Studio,把学习过程中的知识和遇到的问题都写在这里,先从Fragment开始学起. Fragment概述 Fragment是Android ...

  6. C#设计模式之代理模式(四)

    15.7 代理模式效果与适用场景 代理模式是常用的结构型设计模式之一,它为对象的间接访问提供了一个解决方案,可以对对象的访问进行控制.代理模式类型较多,其中远程代理.虚拟代理.保护代理等在软件开发中应 ...

  7. 30分钟LINQ教程 【转载】

    原文地址:http://www.cnblogs.com/liulun/archive/2013/02/26/2909985.html 在说LINQ之前必须先说说几个重要的C#语言特性 一:与LINQ有 ...

  8. 动态获取Drawable图片资源

    比如Drawable中有一系列连续的图片,img_0.png, img_1.png, img_2.png ... 如果要动态获取这些图片,通过"R.drawable.img_x"的 ...

  9. WAKE-WIN10-SOFT-GITHUB

    1,GITHUB 官网:https://github.com/ 2,软件工具 ,,,,,,

  10. JAVA利用poi获取world文件内容

    本文主要简单介绍了利用poi包,读取world文件内容. 这个依然存在版本的问题,只能读取doc结尾的老版本文件. 话不多说,上代码: import java.io.File; import java ...