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