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

最新推荐文章于 2025-02-16 21:56:29 发布

原创最新推荐文章于 2025-02-16 21:56:29 发布 · 8k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#材质 #html5 #three.js

element ui 同时被 2 个专栏收录

6 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

本文介绍如何使用Vue.js实现动态表单，创建下级部门并实时绑定输入值。通过v-for循环和v-model双向数据绑定，同时设置了输入验证规则，确保数据的正确性和结构管理。

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