动态表单以及多表单校验

需求：在d出的Dialog中，点击新增按钮，生成一个或多个表单，可以取消，保存和关闭
分析：既然是多表单，那么肯定是放到数组中用来保存，然后点击新增按钮，会push一个数组对象进去

实现：

1.定义表单组件: FormComponent.vue

<section class="form-wrapper">
    <el-form :model="dynamicForm" label-width="100px"
    :rules="rules" ref="ruleForm" label-align="right">
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="所属班级" prop="className">
            <el-select v-model="dynamicForm.className" clearable
              filterable
              :filter-method="filterClassMethod"
              placeholder="请选择"
              >
              <el-option
                  v-for="item in classList"
                  :key="item.classCode"
                  :label="item.className"
                  :value="item.classCode">
                </el-option>
            </el-select>
          </el-form-item>
        </el-col>
    <el-form-item label="name" prop="name">
      <el-input v-model="dynamicForm.name" placeholder="请输入内容" clearable></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model="dynamicForm.age" placeholder="请输入内容" clearable></el-input>
    </el-form-item>
    </el-form>
  </section>

父组件是一个Dialog，在父组件中引入动态表单组件

<div class='dynamic-form-wrapper'>
    <section class="form-container">
      <w-modal
        :visible.sync="visible"
        :title="title"
        :close-on-click-modal="false"
        :before-close-button="close"
        width="59%">
        <section>
         <el-button type='primary' @click="add">新增</el-button>
        </section>
        <!-- 在动态表单组件外层，需要去定义一个数组，遍历渲染出表单 -->
        <section v-for="(item, index) in addList" :key="index">
        <!--此处为动态表单组件-->
          <component :is="dynamicFormComponent"
            ref="dynamicForm"
            :key="index"
            :formObj="item"
            @delete="delete(index)"></component>
        </section>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close">取消</el-button>
          <el-button type='primary' @click="save">保存</el-button>
        </div>
      </w-modal>
    </section>
  </div>

3.难点剖析：

import FormComponent from '@/views/FormComponent/components/FormComponent.vue'

components: {
	FormComponent
},
data () {
    return {
      dynamicFormComponent: 'FormComponent',
      // 列表定义成一个数组对象
      addList: [{
        className: '', 
        age: '', 
        name: '',
      }]
    }
  }
methods: {
// 新增
  add () {
    this.addList.push({
       className: '', 
       age: '', 
       name: '',
    })
  },
  // 删除
  deleteFormItem (item) {
    this.addList.splice(item, 1) // 按照点击的数组索引去删除
  }
}

// 取消 关闭
close () {
  if (this.addList && this.addList.length > 0) {
    this.addList.forEach((item, index) => {
      this.$refs.dynamicForm[index].$refs.ruleForm.resetFields()
    })
  }
  this.$emit('closeExtendDialog')
},
// 处理多表单校验结果 获取多表单的valid 校验结果集
handleValidte () {
  let validList = []
  if (this.addList && this.addList.length) {
    this.addList.forEach((item, index) => {
      this.$refs.dynamicForm[index].$refs.ruleForm.validate(valid => {
        validList.push(valid)
      })
    })
    return validList
  }
},
// 重置多表单
resetMultiForms () {
  if (this.addList && this.addList.length) {
    this.addList.forEach((item, index) => {
      this.$refs.dynamicForm[index].$refs.ruleForm.resetFields()
    })
  }
},
// 提交
async save () {
  let param = this.getFormData()
  if (this.addList && this.addList.length > 0) {
    let validatedList = this.handleValidte()
    // 判断校验结果集中是否含有false, 如果有false,则说明有必填项没有填，否则校验通过
    if (!validatedList.includes(false)) {
      await this.saveFieldData(this.gradeCode, param)
      this.$emit('closeExtendDialog')
      this.resetMultipleForms()
    }
  } else {
    await this.saveFieldData(this.meunCode, [])
    this.$emit('closeExtendDialog')
  }
}

4.总结：
1）push的是一个表单组件对象，但是给它传的值是一个对象，每次新增时，push 一个表单对象(实际是表单的值)
2）删除时，传递当前表单对象的index,避免只是从 list 中随意地删除
3）表单校验时，先遍历获取所有表单的valid的值，push到一个数组中，然后判断是否有false值，有false 则校验不通过