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 相关文章推荐
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 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常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
Python struct模块解析
2014/06/12 Python
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
详细介绍Python的鸭子类型
2016/09/12 Python
python频繁写入文件时提速的方法
2019/06/26 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
清明节扫墓活动方案
2014/03/02 职场文书
拓展策划方案
2014/06/03 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书
2019各种保证书范文
2019/06/24 职场文书
python自动化测试通过日志3分钟定位bug
2021/11/20 Python
Elasticsearch 聚合查询和排序
2022/04/19 Python