一个新的需求，需要动态添加选择条件，虽然可以实现了，但是在校验提示部分感觉欠佳，直接通过$message 的方式提示不够友好，最后通过网上示例完善校验，对部分几个点做个人总结。

实现思路：
1.由于vue是通过数据驱动展示页面内容，那么可以通过“添加条件”按钮往一个数组中添加对象，然后在下面展示区for循环遍历数组，从而动态生成输入表单。
2.已经完成了动态生成输入框/选择框。那么就是怎么加校验了。注意点来了，该循环的数组对象一点是要在这个form表单绑定的对象中才行:model="dialogForm"，不然如果是一个当独定义的字段对象是没办法加入到表单校验中的。其他的rules定义方式跟网上其他的一致。
这里存在一个问题，当我点击“添加条件”按钮时，如果有没填完的，应该校验提示下面遍历出来部分的表单项，但是通过整个表单ref对象校验时会连带上面部分的一起校验。目前想到的解决方式是①点击“添加条件”按钮时通过$message方式提示还有未填的，②把上下部分拆分成两个表单，在点“添加条件”时只校验下面个表单，而在点保存按钮时校验两个表单的输入项。

目前偷懒没分两个表单而是通过消息提示的方式。

<el-dialog :visible.sync="dialogVisible" :title="dialogTitle"  append-to-body @close="closeDialogVisible">
        <el-form :model="dialogForm" ref="dialogFormRef" :rules="rules" label-width="110px" label-position="right">
            <el-divider content-position="left">常规</el-divider>
            <el-row>
                <el-col :span="20" :offset="2">
                    <el-form-item label="名称" prop="name" :rules="[{required:true,message:'请输入',trigger:'blur'}]">
                        <el-input v-model.trim="dialogForm.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="20" :offset="2">
                    <el-form-item label="描述" prop="desc">
                        <el-input type="textarea" :rows="3" v-model.trim="dialogForm.desc"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        
         <el-divider content-position="left">条件 <el-button type="primary" size="mini" @click="addCondition">添加条件</el-button></el-divider>
         <div v-if="dialogForm.conditionList && dialogForm.conditionList.length>0">
             <div v-for="(item,index) in dialogForm.conditionList" :key="index">
                <el-row :gutter="10" style="margin-top:5px">
                    <el-col :span="7">
                        <el-form-item label-width="0" :prop="'conditionList.'+index+'.conditionType'" :rules="rules.conditionType">
                        <el-select v-model="item.conditionType" placeholder="请选择">
                            <el-option v-for="item in status.conditionTypeList" :key="item.value" :value="item.value" :label="item.label"></el-option>
                        </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label-width="0" :prop="'conditionList.'+index+'.conditionChoose'" :rules="rules.conditionChoose">
                        <el-select v-model="item.conditionChoose" placeholder="请选择">
                            <el-option v-for="item in status.conditionChooseList" :key="item.value" :value="item.value" :label="item.label"></el-option>
                        </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label-width="0" :prop="'conditionList.'+index+'.conditionObj'" :rules="rules.conditionObj">
                        <el-select multiple v-model="item.conditionObj" placeholder="请选择">
                            <el-option v-for="item in status.conditionObjList" :key="item.value" :value="item.value" :label="item.label"></el-option>
                        </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-form-item label-width="0">
                            <el-button v-rulecode="''" plain size="mini" type="danger" icon="el-icon-delete" title="删除"  @click="delRow(item,index)"></el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
             </div>
         </div>
        </el-form>
        <span slot="footer" class="dialog-footer">  
            <el-button @click="closeDialogVisible">取 消</el-button>
            <el-button type="primary"  @click="addNew">保存</el-button>
        </span>
    </el-dialog>

//通过在data中定义
dialogForm:{ 
     name:null,
     desc:null,
     conditionList:[]
 },
rules:{
     conditionType:[{required:true,message:'请选择',trigger:'change'}],
     conditionChoose:[{required:true,message:'请选择',trigger:'change'}],
     conditionObj:[{required:true,message:'请选择',trigger:'change'}]
 }            

//"添加条件"
addCondition(){
      if(this.dialogForm.conditionList.length == 0){
          this.dialogForm.conditionList.push({conditionType:null,conditionChoose:null,conditionObj:[]})
      }else if(this.dialogForm.conditionList.length>0){
          let hasValue = false;
          for(let i=0;i<this.dialogForm.conditionList.length;i++){
              if(!this.dialogForm.conditionList[i].conditionType || !this.dialogForm.conditionList[i].conditionChoose || this.dialogForm.conditionList[i].conditionObj.length==0){
                  hasValue = true;
                  break;
              }
          }
          if(hasValue){
               
              return this.$message.warning("请先选择未选择项");
          }else{
              this.dialogForm.conditionList.push({conditionType:null,conditionChoose:null,conditionObj:[]})
          }
        
      }
 },
 //删除
  delRow(row,index){
      this.dialogForm.conditionList.splice(index,1);
  },
 //保存校验
addNew(){
     this.$refs["dialogFormRef"].validate((valid) => {
       if (valid) {
           
       }
     })
 },  

其实在element-ui文档组件示例中也有动态添加表单组件功能