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();
}
})
},
}
}
element 表单的input循环生成,并可单个input失去焦点单个验证并保存; (多个表单实例)的更多相关文章
- php循环生成的表单如何获得其各项值案例
思路:输入框和按钮是用for循环生成的,不但要获取输入框里的各项值,并且要获取点击按钮的值,要知道是那个按钮被点击了,这里以生成5个为例.如图: 这是提交页面,点击的是“小米”. 这是显示结果,测试显 ...
- 031——VUE中表单控件处理之使用vue控制input和textarea表单项
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 循序渐进PYTHON3(十三) --3-- DJANGO之FORM表单(为自动生成的HTML标签添加样式)
views.py from django.shortcuts import render,HttpResponse from django import forms import json impor ...
- GZFramwork数据库层《二》单据表增删改查(自动生成单据号码)
运行效果: 使用代码生成器(GZCodeGenerate)生成tb_EmpLeave的Model 生成器源代码下载地址: https://github.com/GarsonZhang/GZCodeGe ...
- MySQL分库分表环境下全局ID生成方案 转
在大型互联网应用中,随着用户数的增加,为了提高应用的性能,我们经常需要对数据库进行分库分表操作.在单表时代,我们可以完全依赖于数据库的自增ID来唯一标识一个用户或数据对象.但是当我们对数据库进行了分库 ...
- MySQL分库分表环境下全局ID生成方案
在大型互联网应用中,随着用户数的增加,为了提高应用的性能,我们经常需要对数据库进行分库分表操作.在单表时代,我们可以完全依赖于数据库的自增ID来唯一标识一个用户或数据对象.但是当我们对数据库进行了分库 ...
- 【转】MySQL分库分表环境下全局ID生成方案
转载一篇博客,里面有很多的知识和思想值得我们去思考. —————————————————————————————————————————————————————————————————————— 在大 ...
- laravel基础课程---14、表单验证(lavarel如何进行表单验证)
laravel基础课程---14.表单验证(lavarel如何进行表单验证) 一.总结 一句话总结: lavarel的验证的功能比tp要[简单]且[强大]很多 直接控制器中:添加[规则数组]和[修改提 ...
- 分库分表之后全局id咋生成?
1.面试题 分库分表之后,id主键如何处理? 2.面试官心里分析 其实这是分库分表之后你必然要面对的一个问题,就是id咋生成?因为要是分成多个表之后,每个表都是从1开始累加,那肯定不对啊,需要一个全局 ...
随机推荐
- javascript分页显示
//根据条件查找数据 list = Stdqj.FindAll() * , ); // 根据list查找的条件,查找list的总数(count) ViewBag.total = Stdqj.FindC ...
- win10 MySQL8.0 zip包安装及问题解决
1.在官网下载zip包 https://dev.mysql.com/downloads/mysql/ 2.将zip包解压到自己的工作目录中 3.配置环境变量 1)添加环境变量 MYSQL_HOME E ...
- MyBatis 中 sqlmapconfig核心标签typeAliases配置说明
标签说明 在 MyBatis 的 sql 映射配置文件中,需要使用 paramterType.resultType 来设置 sql 语句的输入输出参数,一般参数都是基本的数据类型或封装类型,但都需要声 ...
- JS文本中间显示省略号
众所周知,文本溢出显示省略号用CSS就可以: 单行文本: white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display ...
- 软件项目技术点(2)——Canvas之坐标系转换
AxeSlide软件项目梳理 canvas绘图系列知识点整理 默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为 ...
- ArcGIS Enterprise 10.5.1 静默安装部署记录(Centos 7.2 minimal)- 4、安装 ArcGIS for Server
安装ArcGIS for Server 解压server安装包,tar -xzvf ArcGIS_Server_Linux_1051_156429.tar.gz 切换到arcgis账户静默安装serv ...
- Anaconda中spyder 安装tensorflow
关于Anaconda的安装就不介绍了,本文主要介绍spyder中安装 tensorflow.废话少说 直接重点: 1.安装好Anaconda之后,找到spyder图标 点击install,等待安装完成 ...
- WAKE-WIN10-SOFT-VS2013及工具
1,下载安装,,,,,,, 2,配置 3opencv 3,1官网:http://opencv.org/ 3,3VS2013+OPENCV249配置 http://jingyan.baidu.com/a ...
- 关于simotion建立同步/解除同步的问题
关于simotion建立同步/解除同步的问题. 问题: [enable gearing][disable gearing][enable camming][disable camming]都是一个过程 ...
- Jerry的Fiori原创文章合集
我曾经于2014年10月到2016年5月工作于SAP CRM Fiori应用的开发团队, 我所在的团队负责下列这8个Fiori应用的维护和持续开发: My Opportunities My Tasks ...