element form 校验数组每一项实例代码


Posted in Javascript onOctober 10, 2019

1.校验的数据结构如下:

element form 校验数组每一项实例代码

 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 校验数组每一项实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
索趣科技的答案
Feb 07 Javascript
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
Javascript string 扩展库代码
Apr 09 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
基于JavaScript实现多级菜单效果
Jul 25 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
node.js博客项目开发手记
Mar 16 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 #Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 #jQuery
VUE注册全局组件和局部组件过程解析
Oct 10 #Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 #jQuery
electron-vue开发环境内存泄漏问题汇总
Oct 10 #Javascript
Vue使用NProgress的操作过程解析
Oct 10 #Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 #Javascript
You might like
PHP操作文件方法问答
2007/03/16 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
php实现aes加密类分享
2014/02/16 PHP
php分页函数示例代码分享
2014/02/24 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
vue cli 全面解析
2018/02/28 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
js常见遍历操作小结
2019/06/06 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
python判断元素是否存在的实例方法
2020/09/24 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
傲盾软件面试题
2015/08/17 面试题
创建青年文明号材料
2014/05/09 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
校本课程教学计划
2015/01/19 职场文书
大学军训心得体会800字
2016/01/11 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android