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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
一组JS创建和操作表格的函数集合
May 07 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
js仿手机页面文件下拉刷新效果
Oct 14 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
JS常见构造模式实例对比分析
Aug 27 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+MSSQL分页的例子
2006/10/09 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
PHP微信API接口类
2016/08/22 PHP
php中__toString()方法用法示例
2016/12/07 PHP
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
Python构建网页爬虫原理分析
2017/12/19 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
大学毕业登记表自我鉴定
2013/10/09 职场文书
大学生职业生涯设计书
2014/01/02 职场文书
班主任工作年限证明
2014/01/12 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
2014年教师党员自我评议
2014/09/19 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
信用卡工作证明范本
2015/06/19 职场文书
小程序自定义轮播图圆点组件
2022/06/25 Javascript