element-ui 动态渲染input输入框、下拉框并校验-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui 动态渲染input输入框、下拉框并校验。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

先看效果：
element 动态添加input,vue,vue.js,前端,javascript

代码实现：
HTML

<el-form :model="condition" ref="apply_form_list" label-width="120px">
        <el-divider content-position="left">条件 <el-button type="primary" size="mini" @click="addCondition">添加条件</el-button><el-button type="primary" size="mini" @click="addNew">保存</el-button></el-divider>
         <div v-if="condition.conditionList && condition.conditionList.length>0">
             <div v-for="(item,index) in condition.conditionList" :key="index">
                <el-row :gutter="10" style="margin-top:5px">
                    <el-col :span="7">
                        <el-form-item label-width="0" :prop="'conditionList.'+index+'.conditionType'" :rules="rules.conditionType">
                          <el-input v-model="item.conditionType" placeholder="请选择"> </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                      <el-form-item label-width="0" :prop="'conditionList.'+index+'.conditionChoose'" :rules="rules.conditionChoose">
                        <el-select v-model="item.conditionChoose" placeholder="请选择">
                            <el-option v-for="item in status.conditionChooseList" :key="item.value" :value="item.value" :label="item.label"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label-width="0" :prop="'conditionList.'+index+'.conditionObj'" :rules="rules.conditionObj">
                        <el-select multiple v-model="item.conditionObj" placeholder="请选择">
                            <el-option v-for="item in status.conditionObjList" :key="item.value" :value="item.value" :label="item.label"></el-option>
                        </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-form-item label-width="0">
                            <el-button size="mini" type="danger" icon="el-icon-delete" title="删除"  @click="delRow(item,index)"></el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
             </div>
         </div>
</el-form>

JS文章来源地址https://www.toymoban.com/news/detail-595978.html

export default {
	data(){
		return {
			condition: {conditionList:[]},
      		status:{
        		conditionChooseList:[{label:"吃饭",value:"1"},{label:"打游戏",value:"2"}],
        		conditionObjList:[{label:"今天",value:"1"},{label:"明天",value:"2"}]
      		},
      		rules:{
          		conditionType:[{required:true,message:'请选择',trigger:'blur'}],
          		conditionChoose:[{required:true,message:'请选择',trigger:'change'}],
          		conditionObj:[{required:true,message:'请选择',trigger:'change'}],
      		}
		}
	},
	methods: {
    //"添加条件"
		addCondition(){
      		if(this.condition.conditionList.length == 0){
          		this.condition.conditionList.push({conditionType:null,conditionChoose:null,conditionObj:[]})
      		}else if(this.condition.conditionList.length>0){
          		let hasValue = false;
          		for(let i=0;i<this.condition.conditionList.length;i++){
              		if(!this.condition.conditionList[i].conditionType|| !this.condition.conditionList[i].conditionChoose||this.condition.conditionList[i].conditionObj.length==0){
                  		hasValue = true;
                  		break;
              		}
         		 }
          		if(hasValue){
              		return this.$message.warning("请先选择未选择项");
          		}else{
              		this.condition.conditionList.push({conditionType:null,conditionChoose:null,})
          		}
          	}
    	},
    	//删除
  	delRow(row,index){
      this.condition.conditionList.splice(index,1);
  	},
  	   //保存校验
	addNew(){
     this.$refs["apply_form_list"].validate((valid) => {
       if (valid) {
           
       }
     });
 	}
 },
}