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 校验数组每一项的更多相关文章

  1. Element Form表单实践(上)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  2. Element Form表单实践(下)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  3. 深入了解Element Form表单动态验证问题 转载

    随风丶逆风 2020-04-03 15:36:41  2208  收藏 3 分类专栏: Vue 随笔 文章标签: 动态验证 el-form elementUI 表单验证 版权 在上一篇<vue ...

  4. ExtJS4为form表单必填项添加红色*标识

    通常情况下,ExtJS4的form表单必填项在输入状态下会有特殊提示,非输入状态下,显示却和其他项没有任何区别.为使必填项更加容易区分,我们需要根据allowBlank的属性值,为form表单中的必填 ...

  5. 利用JavaScript去掉数组中重复项

    利用JavaScript的object的特性,我们可以非常容易的实现将一个数组的重复项去掉. object的特性是:key一定是唯一的. 把数组重复项去掉: 1 将数组转换成一个object对象,数组 ...

  6. [ 记录 ] Vue 对象数组中一项数据改变,页面不更新

    问题描述:将data中数据列表渲染到页面,循环生成 el-switch,点击页面中 el-switch 后数组中某项值改变,但是页面不更新 数据格式如下 export default{ data(){ ...

  7. 删除数组某一项,使用splice的坑

    var arr=[1,2,3,4,5,6,7,8,9,10];//创建数组 var testArr=arr;//让testArr等于创建的数组 arr.splice(0,1);删除arr数组的第一项 ...

  8. Leetcode 80.删除重复数组的重复项

    删除重复数组的重复项 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素最多出现两次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间 ...

  9. django之分页器、多对多关系、form校验组件

    批量插入数据 bulk_create # 1.往书籍表中插入数据 1000 # for i in range(1000): # 这种插入方式 效率极低 # models.Book.objects.cr ...

随机推荐

  1. js的模块化之路

    在ES6之前,官方没有出来import export这种模块化的语法. 为了提高代码复用.避免污染全局,民间写了很多模块化的实现: 1. 立即执行函数 (function(globalVariable ...

  2. 《MySQL数据分析实战》八句箴言前四句解析

    大家好,我是jacky朱元禄,很高兴继续跟大家学习<MySQL数据分析实战>,从本节课程开始,jacky将从SQL语句入手,给大家解析八句箴言: 不管三七二十一,先把数据show来看: 数 ...

  3. meshing-局部加密

    原视频下载地址: https://pan.baidu.com/s/1nvSf5qh 密码: cpbs

  4. Wireshark 序

    1. Foreword 前言 2. Who should read this document? 谁适合读该文档? 3. Acknowledgements 致谢 4. About this docum ...

  5. chrome-添加JSON-handler插件

    1.访问http://jsonhandle.sinaapp.com/下载 2.谷歌访问   chrome://extensions/ 然后找到你下载的JSON-handle_0.5.2.crx文件,直 ...

  6. 如何获取UA?

    代码: function whatBrowser() { document.Browser.Name.value = navigator.appName; document.Browser.Versi ...

  7. Nginx中文文档-安装 Nginx

    nginx可以使用各平台的默认包来安装,本文是介绍使用源码编译安装,包括具体的编译参数信息. 正式开始前,编译环境gcc g++ 开发库之类的需要提前装好,这里默认你已经装好. ububtu平台编译环 ...

  8. android: 日期转Unix时间戳,Unix时间戳转日期,带时区

    1.UTC时间&GMT时间 UTC时间是时间标准时间(Universal Time Coordinated),UTC是根据原子钟来计算时间,误差非常小. UTC也是指零时区的时间,如果要表示其 ...

  9. [插件式开发][C#]

    Demo 下载 参考文章:https://www.cnblogs.com/hippieZhou/p/9398354.html 技术方面要使用到 依赖注入,可以参考此示例逐步学习:https://git ...

  10. 持续集成和部署工具GOCD

    如果大家使用过Jenkins那么相信大家对于持续集成非常熟悉.今天要给大家介绍的是另一个非常强大的CD工具GoCD官方对其也称之为GO但是要明白他和go语言golang是没有多大关系的,他是使用jav ...