当前位置：主页 > 查看内容

vue+elementUI动态增加表单项并添加验证的代码详解

发布时间：2021-06-16 00:00| 有 位朋友查看

简介：参考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-co……

参考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增加表单项内容请搜索站长技术以前的文章或继续浏览下面的相关文章希望大家以后多多支持站长技术！


原文链接：https://m.jb51.net/article/202347.htm
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：原生js实现移动小球（碰撞检测） 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐