element form 校验数组每一项
1.校验的数据结构如下:
2.html结构
<el-dialog
:title="title"
:visible.sync="visable"
width="40%"
:before-close="cancel">
<el-form label-width="80px" :model="formData" :rules="formDataRules" ref="formData" >
<el-form-item label="Id" prop="id" v-if="formData.id">
{{formData.id}}
</el-form-item> // begin ---------------------
<div v-for="(item, index) in formData.test" :key="index">
<el-form-item label="test1" :prop="`test[${index}].test1`" :rules="{ required: true, message: '请输入test1', trigger: 'blur' }">
<el-input type="text" v-model="item.test1"></el-input>
</el-form-item>
<el-form-item label="test2" :prop="`test[${index}].test2`" :rules="{ required: true, message: '请输入test2', trigger: 'blur' }">
<el-input type="text" v-model="item.test2"></el-input>
</el-form-item>
</div>
// end --------------------- </el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="save('formData')">确 定</el-button>
</div>
</el-dialog>
3.提交
save(formName: string) {
const el: any = this.$refs[formName] ;
el.validate((valid: any) => {
if (valid) {
// todo 校验成功
} else {
return false;
}
});
}
4.效果
element form 校验数组每一项的更多相关文章
- Element Form表单实践(上)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
- Element Form表单实践(下)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
- 深入了解Element Form表单动态验证问题 转载
随风丶逆风 2020-04-03 15:36:41 2208 收藏 3 分类专栏: Vue 随笔 文章标签: 动态验证 el-form elementUI 表单验证 版权 在上一篇<vue ...
- ExtJS4为form表单必填项添加红色*标识
通常情况下,ExtJS4的form表单必填项在输入状态下会有特殊提示,非输入状态下,显示却和其他项没有任何区别.为使必填项更加容易区分,我们需要根据allowBlank的属性值,为form表单中的必填 ...
- 利用JavaScript去掉数组中重复项
利用JavaScript的object的特性,我们可以非常容易的实现将一个数组的重复项去掉. object的特性是:key一定是唯一的. 把数组重复项去掉: 1 将数组转换成一个object对象,数组 ...
- [ 记录 ] Vue 对象数组中一项数据改变,页面不更新
问题描述:将data中数据列表渲染到页面,循环生成 el-switch,点击页面中 el-switch 后数组中某项值改变,但是页面不更新 数据格式如下 export default{ data(){ ...
- 删除数组某一项,使用splice的坑
var arr=[1,2,3,4,5,6,7,8,9,10];//创建数组 var testArr=arr;//让testArr等于创建的数组 arr.splice(0,1);删除arr数组的第一项 ...
- Leetcode 80.删除重复数组的重复项
删除重复数组的重复项 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素最多出现两次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间 ...
- django之分页器、多对多关系、form校验组件
批量插入数据 bulk_create # 1.往书籍表中插入数据 1000 # for i in range(1000): # 这种插入方式 效率极低 # models.Book.objects.cr ...
随机推荐
- 递归函数返回值 undefined
getItem(obj, arr, index) { if (arr.length - 1 !== index) { const tempObj = obj[arr[index]]; this.get ...
- AtCoder Grand Contest 002题解
传送门 \(A\) 咕咕 int main(){ cin>>a>>b; if(b<0)puts(((b-a+1)&1)?"Negative": ...
- 禁止打印调用(python)
原文 : https://cloud.tencent.com/developer/ask/188486 import os, sys class HiddenPrints: def __enter__ ...
- 好久木来了,一直忙于项目(加懒惰),今天讲讲vuecli3.0的使用
vue更新换代很快,马上vue都要出3.0了,这是一个巨大的变革,不过今天讲的是vuecli3.0,里面使用的vue仍然是2的,所有可以放心大胆使用. Vue CLI 是一个基于 Vue.js 进行快 ...
- Maven项目打包时指定配置策略
以数据库连接池的配置文件(db.properties)为例,一般的项目会有开发用数据库,测试用数据库,正式环境数据库三种配置. 以前的做法是拷贝成三份,注释掉其他了两份 # 开发用 jdbc.url ...
- codeforces37C
CF37C Old Berland Language sol:直接暴力模拟下去,长度加了就补0,凑个数就+1,凑不好就puts(“no”) #include <bits/stdc++.h&g ...
- mac下生成keystore
keytool -genkey -v -keystore sign.keystore -alias cxa -keyalg RSA -validity 20000 -keystore /Users/c ...
- springMVC_注解方式搭建基础环境
---恢复内容开始--- 一.jar包环境,web配置文件和Spring-MVC配置文件的,相关的modelAndview 1.配置DispatcherServlet <servlet> ...
- nessus在Linux上的安装
Nessus有三种安装方式 1.源文件安装 源文件安装是最复杂的安装方式,用此方式安装可以修改配置参数. 2.rpm安装 rpm安装比起源文件安装更简单一些,它已经把一些底层的东西写好了,用户只要按步 ...
- zabbix 定义触发器,并使用邮件,微信消息报警。
触发器可根据监控项获取到的值来进行一些操作,如监控项获取到的values为0,触发器可判断为正常,如果获取到了1,就触发报警. 定义报警方式比较简单,但是用shell脚本实现起来,总是有格式问题,所以 ...