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 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
Vue详细的入门笔记
May 10 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
详细聊聊vue中组件的props属性
Nov 02 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 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
使用URL传输SESSION信息
2015/07/14 PHP
thinkphp分页集成实例
2017/07/24 PHP
几个有趣的Javascript Hack
2010/07/24 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
python 容器总结整理
2017/04/04 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
为什么要有struct关键字
2012/05/08 面试题
PyQt 如何创建自定义QWidget
2021/03/24 Python
实习销售业务员自我鉴定
2013/09/21 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
调研座谈会发言材料
2014/08/23 职场文书
讲座新闻稿
2015/07/18 职场文书
家电创业计划书
2019/08/05 职场文书
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android