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)
        }
      }
   }

 

element-ui 生成动态表单

上一篇:698. 划分为k个相等的子集


下一篇:基本数据类型-整数类型