这时我轻轻地闭上了眼睛，我好像来到童话世界，好像在和小鸟讨论秋天的美景，好像在和小草拍秋天的照片。农民伯伯在田野里收获了庄稼，果农们在果园里收获了果子，我们在学校里收获快乐、收获知识、收获成长。
参考elementUI官网以及网上的其他一些资料。话不多说，直接贴代码。 htmt部分：
<divid="app"style="width:500px;">
<el-form:model="environmentForm"ref="environmentForm">
<el-row:gutter="24"v-for="(item,index)inenvironmentForm.items":key="item.key">
<el-col:span="6">
<el-form-item:prop="'items.'+index+'.name'"
:rules="{required:true,message:'名称不能为空',trigger:'blur'}">
<el-inputv-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-inputv-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-buttontype="primary"@click="submitForm('environmentForm')">提交</el-button>
<el-button@click="resetForm('environmentForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
实现效果:单个时
多个时显示删除按钮
到此这篇关于vue+elementUI动态增加表单项并添加验证的代码详解的文章就介绍到这了,更多相关vue+elementUI增加表单项内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
