vue+elementUI动态增加表单项并添加验证的代码详解


Posted in Vue.js onDecember 17, 2020

参考elementUI官网以及网上的其他一些资料。话不多说,直接贴代码。
htmt部分:

<div id="app" style="width: 500px;">
        <el-form :model="environmentForm" ref="environmentForm">
            <el-row :gutter="24" v-for="(item, index) in environmentForm.items" :key="item.key">
                <el-col :span="6">
                    <el-form-item :prop="'items.' + index + '.name'"
                        :rules="{required: true, message: '名称不能为空', trigger: 'blur'}">
                        <el-input v-model="item.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item :prop="'items.' + index + '.variable'"
                        :rules="{required: true, message: '变量值不能为空', trigger: 'blur'}">
                        <el-input v-model="item.variable"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="3" v-if="environmentForm.items.length !== 1">
                    <el-button @click="removeEnvironmentForm(item)" class="el-icon-delete" size="mini" circle>
                    </el-button>
                </el-col>
                <el-col :span="3">
                    <el-button @click="addEnvironmentForm" size="mini" class="el-icon-plus" circle></el-button>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button type="primary" @click="submitForm('environmentForm')">提交</el-button>
                <el-button @click="resetForm('environmentForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>

实现效果:单个时

vue+elementUI动态增加表单项并添加验证的代码详解

多个时显示删除按钮

vue+elementUI动态增加表单项并添加验证的代码详解

到此这篇关于vue+elementUI动态增加表单项并添加验证的代码详解的文章就介绍到这了,更多相关vue+elementUI增加表单项内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
vue3.0实现插件封装
Dec 14 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
vue 数据操作相关总结
Dec 17 #Vue.js
Vue 组件注册全解析
Dec 17 #Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 #Vue.js
vue实现图片裁剪后上传
Dec 16 #Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 #Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 #Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 #Vue.js
You might like
php的curl实现get和post的代码
2008/08/23 PHP
php入门之连接mysql数据库的一个类
2012/04/21 PHP
PHP计数器的实现代码
2013/06/08 PHP
php获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
python中遍历文件的3个方法
2014/09/02 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
Django ORM filter() 的运用详解
2020/05/14 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
生物技术毕业生自荐信
2013/10/23 职场文书
教师的实习鉴定
2013/12/15 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
党员公开承诺书范文
2014/03/25 职场文书
普宁寺导游词
2015/02/04 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书