vue 动态添加下拉选择框

效果图

废话不多说 上代码

<!-- 动态表单 -->
<div>
    <el-form :model="ruleForm" ref="myForm"> 
        <!-- 动态生成的部分 -->
        <div class="moreRules">
            <div class="moreRulesIn" v-for="(item, index) in ruleForm.condition" :key="item.key">
                <div class="flex">
                    <el-form-item class="flex" :label="'条件'+(index+1)+':'" :prop="'condition.' + index +'.description'" :rules="conditionRules.conditionName">
                        <el-input v-model="item.description" placeholder="请输入条件描述" style="width: 540px;"></el-input>
                    </el-form-item>
                    <div class="ml10">
                        <i class="ace-icon fa fa-trash bigger-125 mr10" style="color:red;cursor: pointer;" @click="deleteRules(item, index)"></i>
                    </div>
                </div>
                <!-- <el-form-item class="rules" label="邮箱:" :prop="'condition.'+ index +'.email'" :rules="conditionRules.moreNotifyOjbectEmail">
                    <el-input v-model="item.email" placeholder="请输入邮箱" class="el-select_box"></el-input>
                </el-form-item> -->
                <!-- 动态添加字段