参考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 Element前端应用开发之动态菜单和路由的关联处理
- Vue Element前端应用开发之Vuex中的API Store View的使用
- Vue Element前端应用开发之开发环境的准备工作
- 详解Vue ElementUI手动上传excel文件到服务器
- 总结Vue Element UI使用中遇到的问题
- vue+element开发一个谷歌插件的全过程
- vue+elementui通用弹窗的实现(新增+编辑)
- vue+element UI实现树形表格
- Vue Element前端应用开发之组织机构和角色管理
本文由 华域联盟 原创撰写：华域联盟 » vue+elementUI动态增加表单项并添加验证的代码详解
转载请保留出处和原文链接：https://www.cnhackhy.com/43869.htm
