vue+elementUI实现动态增加表单项并添加验证

心已赠人 2023-01-01 03:58 262阅读 0赞

# vue+elementUI实现动态增加表单项并添加验证 #

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

<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="6">
                 <el-form-item              
                   :prop="'items.' + index + '.description'"
                   :rules="{required: true, message: '描述不能为空', trigger: 'blur'}"                                                     
                   >
                   <el-input type="textarea" :rows="1" v-model="item.description"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="3" v-if="environmentForm.items.length !== 1" >
                 <i  @click="removeEnvironmentForm(item)" 
                     style="font-size:28px;cursor:pointer;"
                     class="el-icon-delete"></i>
               </el-col>
               <el-col :span="3" >
                 <el-button @click="addEnvironmentForm" size="mini" class="el-icon-plus"></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>

js部分：

实现效果如下，当只有一行时，删除按钮是隐藏的。  
![在这里插入图片描述][20200804084701373.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwODEyMw_size_16_color_FFFFFF_t_70]

[20200804084701373.png]: /images/20221120/c864a56651114a25ba6a4d4c24f30e84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwODEyMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200804084726527.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwODEyMw==,size_16,color_FFFFFF,t_70