我是靠谱客的博主 纯情灯泡,这篇文章主要介绍vue+elementUI动态增加表单项并添加验证的代码详解,现在分享给大家,希望可以做个参考。

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

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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动态增加表单项并添加验证内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(135)

评论列表共有 0 条评论

立即
投稿
返回
顶部