需求:点击新增按钮 能不断生成下级部门,所以我再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: [],
}
},