动态生成表单以及多表单校验(二)_多个表单校验-CSDN博客

本文链接：https://blog.csdn.net/qyl_0316/article/details/125278744

本文介绍如何在Vue应用中实现动态生成的多表单，包括添加、删除表单项，以及处理必填字段校验。通过数组操作和表单组件交互，实现表单数据收集、校验和重置功能。

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

问题：需要在一个dialog中放置一个表单，初始化只是一个含有所有表单字段的对象
功能：可以新增，删除，修改，当然，表单肯定包含必填字段的校验，那么多个表单，而且是动态生成的，如果校验，如何生成？
分析：1. 既然是多表单，那肯定是放到数组中list，
2. 新增就list.push一个{}，
3. 删除：list.splice(index, 1),
4. 通过循环去校验每一个表单对象

<el-button type='primary' class="add-btn" @click="add">新增</el-button></section>
<section class="form-section" v-for="(item, index) in list" :key="index">
<!--这是一个动态的表单组件，通过list遍历可以新增或者删除-->
  <component :is="curComponent"
    ref="newForm"
    :key="index"
    :addForm="item"
    @deleteFormItem="deleteForm(index)"></component>
</section>

import formComponentfrom '@/views/components/formComponent.vue' // 导入表单组件
data () {
 return {
   curComponent: 'formComponent',
   // 定义空表单对象，每次push的就是一个表单对象
   list: [{
     name: '',
     isMarried: true,
     age: '',
     gender: '',
     job: ''
   }]
 }
},
// 处理表单数据
handleFormData () {
 let tempList = []
 if (this.list && this.list.length > 0) {
   this.list.forEach((item, index) => {
     let formData = this.$refs.newForm[index].getFormData()
     tempList.push(formData)
   })
}
 return tempList
},
// 获取表单数据
getFormData () {
 let result = []
 let formDataList = this.handleFormData()
 if (formDataList && formDataList.length > 0) {
   formDataList.forEach(item => {
     let { name, isMarried, age, gender, job } = item
     result.push({
       name,
       isMarried,
       age,
       gender,
       job
     })
   })
 }
 return result
},
// 处理多表单校验结果
handleValidte () {
  let validList = []
  if (this.list && this.list.length) {
    this.list.forEach((item, index) => {
      this.$refs.newForm[index].$refs.ruleForm.validate(valid => { // rulesForm 为子组件的ref
        validList.push(valid)
      })
    })
    return validList
  }
},
// 重置多表单
resetMultipleForms () {
  if (this.list && this.list.length) {
  // 遍历所有表单数组，从而重置表单
    this.list.forEach((item, index) => {
      this.$refs.newForm[index].$refs.ruleForm.resetFields() // rulesForm 为子组件的ref
    })
  }
},
// 提交
async save () {
  let param = this.getFormData()
  if (this.list&& this.list.length > 0) {
  // 获取所有表单的校验返回值，如果有一项为false,则校验不通过
    let validList = this.handleValidte()
    if (!validList.includes(false)) {
      // await this.saveFormData(this.id, param)
      this.$emit('closeExtendDialog') // 关闭dialog
      this.resetMultipleForms() // 重置多表单fields
    }
  } else {
    await this.saveFormData(this.id, [])
    this.$emit('closeExtendDialog') // 关闭dialog
  }
},
// 新增 push 一个包含所有表单项的对象
add () {
 this.list.push({
   cdbm: '',
   jlzt: true,
   params: '',
   ssxt: '',
   url: ''
 })
},
// 删除 根据当前传入的表单索引删除对应的项
deleteFormItem (item) {
 this.list.splice(item, 1)
}