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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

### 关于 Ant Design Vue 中 `a-form` 动态表单校验 在 Ant Design Vue 的 `a-form` 组件中处理动态表单时,确保每个字段唯一标识非常重要。当使用 `v-for` 渲染多个相同类型的表单项时,需特别注意如何设置这些项目的键以及它们对应的模型属性。 对于对象嵌套结构下的表单校验问题,在较新版本的 ant-design-vue 和 vue (如 "ant-design-vue": "^3.2.20", "vue": "^3.2.33") 中[^1],如果遇到二次提交时不触发校验的情况,可能是因为内部状态管理机制未能正确识别到变化或是某些配置不当所致。 下面是一个基于上述情况构建的例子,展示了如何利用 `v-for` 来创建可以被有效验证的动态表单: ```html <template> <a-form :model="formData" ref="ruleForm"> <!-- 假设 formData 是一个多级的对象 --> <div v-for="(item, index) in formData.items" :key="index"> <a-form-item :rules="{ required: true, message: '此项不能为空' }" :name="['items', index, 'value']"> <!-- 这里指定了路径 --> <a-input v-model="item.value"></a-input> </a-form-item> </div> <button @click.prevent="handleSubmit()">Submit</button> </a-form> </template> <script setup lang="ts"> import { reactive, ref } from 'vue'; const ruleForm = ref(null); // 初始化数据 let formData = reactive({ items: [ { value: '' }, { value: '' } ] }); function handleSubmit() { ruleForm.value.validateFields().then(() => { console.log('All fields are valid'); }).catch(errorInfo => { console.error('Validation failed:', errorInfo); }); } </script> ``` 此代码片段展示了一个简单的动态表单实例,其中包含了两个输入框,并且这两个输入框都绑定了各自的校验规则。通过指定 `name` 属性来指示具体要校验的数据位置,从而解决了多层嵌套情况下难以准确定位的问题。此外,还提供了按钮用于触发表单的整体校验逻辑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值