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 ...
随机推荐
- js的模块化之路
在ES6之前,官方没有出来import export这种模块化的语法. 为了提高代码复用.避免污染全局,民间写了很多模块化的实现: 1. 立即执行函数 (function(globalVariable ...
- 《MySQL数据分析实战》八句箴言前四句解析
大家好,我是jacky朱元禄,很高兴继续跟大家学习<MySQL数据分析实战>,从本节课程开始,jacky将从SQL语句入手,给大家解析八句箴言: 不管三七二十一,先把数据show来看: 数 ...
- meshing-局部加密
原视频下载地址: https://pan.baidu.com/s/1nvSf5qh 密码: cpbs
- Wireshark 序
1. Foreword 前言 2. Who should read this document? 谁适合读该文档? 3. Acknowledgements 致谢 4. About this docum ...
- chrome-添加JSON-handler插件
1.访问http://jsonhandle.sinaapp.com/下载 2.谷歌访问 chrome://extensions/ 然后找到你下载的JSON-handle_0.5.2.crx文件,直 ...
- 如何获取UA?
代码: function whatBrowser() { document.Browser.Name.value = navigator.appName; document.Browser.Versi ...
- Nginx中文文档-安装 Nginx
nginx可以使用各平台的默认包来安装,本文是介绍使用源码编译安装,包括具体的编译参数信息. 正式开始前,编译环境gcc g++ 开发库之类的需要提前装好,这里默认你已经装好. ububtu平台编译环 ...
- android: 日期转Unix时间戳,Unix时间戳转日期,带时区
1.UTC时间&GMT时间 UTC时间是时间标准时间(Universal Time Coordinated),UTC是根据原子钟来计算时间,误差非常小. UTC也是指零时区的时间,如果要表示其 ...
- [插件式开发][C#]
Demo 下载 参考文章:https://www.cnblogs.com/hippieZhou/p/9398354.html 技术方面要使用到 依赖注入,可以参考此示例逐步学习:https://git ...
- 持续集成和部署工具GOCD
如果大家使用过Jenkins那么相信大家对于持续集成非常熟悉.今天要给大家介绍的是另一个非常强大的CD工具GoCD官方对其也称之为GO但是要明白他和go语言golang是没有多大关系的,他是使用jav ...