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: [],
    }
  },