element-ui 生成动态表单

html:

    <el-select
      v-model="value"
      filterable
      placeholder="请输入关键词"
      :loading="loading"
      @change="select">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>

    <el-card class="box-card" v-for="(item,index) in makeData" :key="index">
      <!-- <div #header class="clearfix"><span>{{item.formName}}</span></div> -->
      <el-form :inline="true" :ref="item.formRef" :model="item.formModel" class="demo-form-inline">
        <el-form-item label="审批人" prop='user' :rules="[{ required: true, message: '审批人不能为空'}]">
            <el-input v-model="item.formModel.user" placeholder="审批人"></el-input>
        </el-form-item>
          <el-form-item label="区域" prop='region' :rules="[{ required: true, message: '区域不能为空'}]">
            <el-input v-model="item.formModel.region" placeholder="审批人"></el-input>
        </el-form-item>
      </el-form>
    </el-card>

script:

data () {
    return {
      options: [{
        value: '1',
        label: '控制飞行时间'
      }, {
        value: '2',
        label: '控制飞行起落'
      }, {
        value: '3',
        label: '控制日历时间'
      }],
      makeData: [{
        formRef: 'formFirst', // 表单ref
        formModel: { user: '', region: '' }, // 表单model
        formName: '表单A' // 表单标题
      }, {
        formRef: 'formSecond',
        formModel: { user: '', region: '' },
        formName: '表单B'
      }, {
        formRef: 'formThird',
        formModel: { user: '', region: '' },
        formName: '表单C'
      }]
    }
  },

　　methods: {

    　　select (val) {

      　　if (val === '1') {

        　　var obj = {

          　　formRef: 'planeTime', // 表单ref

          　　formModel: { user: '', region: '' }, // 表单model

          　　formName: '控制飞行时间' // 表单标题

        　　}

        　　this.makeData.push(obj)

      　　}

    　　}

   }