vue 动态表单+动态验证

    <el-form v-if="JSON.stringify(formInline) !== {}"
                      :model="formInline" :rules="rules"     
                     ref="formref" label-width="160px"
    >
          <div v-for="(it index) in dynamicForm" :key="index">
                  <el-form-item
                        v-if="it.controlType === 'text'"
                        :label="it.caption"
                         :prop="it.eleCode && it.eleCode"
                  >
                        <el-input
                              v-model="formInline[it.eleCode]"
                              placeholder="请输入"
                              style="width: 300px"
                             clearable
                         >
                         </el-input>
                  </el-form-item>
                  <el-form-item
                        v-if="it.controlType === 'combo'"
                        :label="it.props.caption"
                         :prop="it.props.eleCode && it.props.eleCode"
                  >
                   <el-select
                         v-model="formInline[it.eleCode]"
                          :value="formInline[it.eleCode]"
                          placeholder="请选择"
                          style="width: 300px"
                    >
                         <el-option
                                v-for="item in it"
                                :key="item.label"
                                :label="label"
                                :value="value"
                        ></el-option>
                    </el-select>
               </el-form-item>
                ....
          </div>
    </el-form>
</template>```
```<script>
export default {
  name: "forms",
  props: ['dynamikc'],          
  data() {
    return {
      formInline: {},
      dynamicForm: [{
          controlType: 'text',  //表单类型
          caption: '文本框',  // label
          eleCode: 'TEXT',  // 表单提交的字段属性
          isShowValidate: true,  // 是否为必填项
          option: []  //单选复选数据
      }, {
          controlType: 'select',
          caption: '下拉框',
          isShowValidate: true,
          eleCode: 'SELECT',
          option: [{
              value: '1',
              label: '1'
          }, {
              value: '1',
              label: '1'
          }]
      }, {
          controlType: 'radio',
          caption: '单选',
          eleCode: 'RADIO',
          isShowValidate:  false,
          option: [{
              value: '1',
              label: '1'
          }, {
              value: '1',
              label: '1'
          }]
      }],
      rules: {},
    }
  },
  created() {
      this.dynamicForm.map(item => {
            this.propsKey(item)
      })
  },
  methods: {
      /**
       *  表单校验+提交 
      */
      submit() {
          this.$refs['formref'].validate((valid) => {
            if (valid) {
              alert('submit!');
            } else {
              // alert('error submit!!');
              return false;
            }
          });
      },
      /**
       *  去form-model的key 和 判断创建rules
       *  item[Object] 动态表单的item
       */
      propsKey(item) {
          if(item.eleCode) {
              // 创建动态表单的v-model
              let obj = {};
              obj[item.eleCode] = '';
              this.formInline = Object.assign({...this.formInline}, {...obj});
              // 判断是否是必填项
              if(item.isShowValidate) {
                  if(item.controlType === 'text') {
                      let rule = {};
                      rule[item.eleCode] = [{
                          required: true, message: '必填项不能为空，请输入', trigger: 'blur'
                      }];
                      this.rules = Object.assign({...this.rules}, {...rule});
                  } else {
                      let rule = {};
                      rule[item.eleCode] = [{
                          required: true, message: '必填项不能为空，请选择', trigger: 'change'
                      }];
                      this.rules = Object.assign({...this.rules}, {...rule});
                  }
              }
          } 
      }
  },
};
</script>```