v-for 循环生成多个表单元素给动态生成的表单元素绑定值并且添加校验规则

需求：点击新增按钮能不断生成下级部门，所以我再data中定义了一个变量空数组

subordinateDepartmentNum：[] 默认值设置为[]

给增加按钮添加点击事件每点击一次按钮 subordinateDepartmentNum加1

// 新增下级部门
addDepartment() {this.subordinateDepartmentNum.push(this.subordinateDepartmentNum.length);
//确保每次新增的下级部门的文本框的内容都是空的--
this.childrenData.deptName[this.subordinateDepartmentNum.length-1] = undefined;
},

通过v-for循环生成表单这样就可以生成多个下级部门的表单元素

  <div class="add_department_box" v-for="(item,index) in subordinateDepartmentNum" :key="index"></div>

那么问题来了如何绑定给循环出来的表单绑定值以及添加验证规则呢？

绑定值的方法：

在data中定义一个值childrenData:{ deptName:[] } 通过以下方式绑定值：

 <el-form-item label="名称" class="child_dept_name">
<el-input v-model="childrenData.deptName[index]"></el-input>
</el-form-item>

绑定后在输入框中输入值，打印childrenData的值得到一个数组，数组中的值是表单元素中输入的值

添加校验规则的方法: 在表单中添加:prop 和 :rules 我是循环的数字 n是从1开始的

<el-form ref="childForm" :model="childrenData" :rules="childrenRules" class="add_department_form"label-width="80"><div class="add_department_box" v-for="(item,index) in subordinateDepartmentNum" :key="index"><el-form-item label="名称" :prop="'deptName.'+index" :rules="childrenRules.deptName" class="child_dept_name"><el-input v-model="childrenData.deptName[index]"></el-input></el-form-item></div>
</el-form>

//新增的下级架构校验规则
childrenRules: {deptName: [{required: true, message: "名称不能为空", trigger: "blur"}]
},

完整的代码

 <el-form ref="childForm" :model="childrenData" :rules="childrenRules" class="add_department_form"label-width="80"><div class="add_department_box" v-for="(item,index) in subordinateDepartmentNum" :key="index"><el-form-item label="" prop="" class="child_num"><div class="num_text">{{ index + 1 }}</div></el-form-item><el-form-item label="名称" :prop="'deptName.'+index" :rules="childrenRules.deptName" class="child_dept_name"><el-input v-model="childrenData.deptName[index]"></el-input></el-form-item><el-form-item label="" prop="" class="child_type"><el-radio-group v-model="childrenData.type"><el-radio :label="1">公司</el-radio><el-radio :label="2">部门</el-radio></el-radio-group></el-form-item><div class="close" @click="closeDepartmentBox(index)"><span class="iconfont icon-31guanbi"></span></div></div></el-form>data() {return {//新增的下级架构数据//新增的下级架构数据childrenData: {deptName: [],type: 2},//新增的下级架构校验规则childrenRules: {deptName: [{required: true, message: "名称不能为空", trigger: "blur"}]},// 新增的下级部门的数量subordinateDepartmentNum: [],}},

v-for 循环生成多个表单元素给动态生成的表单元素绑定值并且添加校验规则相关推荐

通过表单设计器动态生成数据库表以及动态查询的功能实现
表单设计器动态生成数据库表以及动态查询的功能实现前言 1. 功能实现 1.1 效果说明 1.2 功能流程图 1.3 具体后端实现 1.4 实现效果 2. 尾声前言前两天安排了作为Java小码农的 ...
python3动态生成变量_【转载】 Python动态生成变量
用Python循环创建多个变量, 如创建 a1= .a2= .a3= .a4= .a5= 或 self.a1= .self.a2= . self.a3= 一. 可以通 ...
没有form的表单验证_PHP动态生成表单，内置17种常用组件并且支持表单验证！
FormBuilder 是一个开源的PHP表单生成器,可以快速生成现代化的form表单.还可以配合开源项目 xaboy/form-create 生成任何 Vue 组件 github | 文档环境需求 ...
jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验
一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...
html表单通过js提交表单提交,JavaScript动态创建form表单并提交的实现方法
本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 ...
java在linux生成pdf文件,从 Java 应用程序动态生成 PDF 文件
简介: 如果您的应用程序需要动态生成 PDF 文档,那么您需要 iText 库.开源的 iText 库使得 PDF 的创建变得轻松易行.本文介绍了 iText 并提供了一个使用它从 Java 技术应用 ...
php点击后增加html元素,如何动态生成html元素以及为元素追加属性的方法介绍（附代码）...
本篇文章给大家分享的是关于如何动态生成html元素以及为元素追加属性的方法介绍(附代码),内容很不错,有需要的朋友可以参考一下,希望可以帮助到大家. 动态生成HTML元素的方法有三种: 第一种:doc ...
java生成word文档_Java多种方式动态生成doc文档
本来是要在Android端生成doc的(这需求...),最后方法没有好的方法能够在Android上做到完美,最后还是只能搬迁到服务器.不浪费,还是记录下各框架不支持Android的原因以及他们的特点. ...
动态生成form表单，不在为表单烦恼
form-create 具有动态渲染.数据收集.校验和提交功能的表单生成器,动态生成Form表单.支持双向数据绑定和事件扩展,组件包含有复选框.单选框.输入框.下拉选择框等表单元素以及省市区三级联动, ...

v-for 循环生成多个表单元素给动态生成的表单元素绑定值并且添加校验规则

v-for 循环生成多个表单元素给动态生成的表单元素绑定值并且添加校验规则相关推荐

最新文章

热门文章

v-for 循环生成多个表单元素 给动态生成的表单元素绑定值并且添加校验规则

v-for 循环生成多个表单元素 给动态生成的表单元素绑定值并且添加校验规则相关推荐

最新文章

热门文章

v-for 循环生成多个表单元素给动态生成的表单元素绑定值并且添加校验规则

v-for 循环生成多个表单元素给动态生成的表单元素绑定值并且添加校验规则相关推荐