element ui 实现动态表单

实现具体功能

对表单进行新增、删除以及验证每一个表单的字段。
实现效果如图
1.实现表单的添加和删除

   // 新增
       addForm(index) {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    this.form.formList.push({
                        ...this.form.formList[index],
                        questionClassify: 1,
                        severityDegree: 1,
                        question: '',
                        modelId: '',
                        modelName: '',
                        picIdList: [],
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    
   // 删除
   deleteCurrentForm(index) {
            debugger
            // if()
            this.form.formList.splice(index, 1)
        },

2.可能较不常见的就是表单的验证，在添加下一个表单时对上一个表单进行验证。只需在prop中加入当前要验证的哪个表单的哪个字段，如下。

 <el-form-item label="检查时间" :prop="`formList.${index}.checkDate`" :rules="rules.checkDate">

再展示一下form的结构：

 form: {
          formList: [{
            inspectType: 0,
            checkDate: new Date(),
            checkUserId: '',
            checkUserName: '',
            checkOrgName: '',
             checkOrgId: '',
             modelId: '',
             modelName: '',
             questionClassify: 1,
             severityDegree: 1,
             unitProject: '',
             distributeProject: '地基与基础', //分部工程
             concreteProject: '',
             question: '',
             picIdList: []
             }]
       },
    rules: {checkDate: [ {required: true, message: '请输入检查时间', trigger: 'blur'} ] }