<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="請(qǐng)輸入"
                              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="請(qǐng)選擇"
                          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,  // 是否為必填項(xiàng)
          option: []  //單選復(fù)選數(shù)據(jù)
      }, {
          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: {
      /**
       *  表單校驗(yàn)+提交 
      */
      submit() {
          this.$refs['formref'].validate((valid) => {
            if (valid) {
              alert('submit!');
            } else {
              // alert('error submit!!');
              return false;
            }
          });
      },
      /**
       *  去form-model的key 和 判斷創(chuàng)建rules
       *  item[Object] 動(dòng)態(tài)表單的item
       */
      propsKey(item) {
          if(item.eleCode) {
              // 創(chuàng)建動(dòng)態(tài)表單的v-model
              let obj = {};
              obj[item.eleCode] = '';
              this.formInline = Object.assign({...this.formInline}, {...obj});
              // 判斷是否是必填項(xiàng)
              if(item.isShowValidate) {
                  if(item.controlType === 'text') {
                      let rule = {};
                      rule[item.eleCode] = [{
                          required: true, message: '必填項(xiàng)不能為空埋市，請(qǐng)輸入', trigger: 'blur'
                      }];
                      this.rules = Object.assign({...this.rules}, {...rule});
                  } else {
                      let rule = {};
                      rule[item.eleCode] = [{
                          required: true, message: '必填項(xiàng)不能為空冠桃，請(qǐng)選擇', trigger: 'change'
                      }];
                      this.rules = Object.assign({...this.rules}, {...rule});
                  }
              }
          } 
      }
  },
};
</script>```