记录vue+elementui 动态添加输入选择框并增加校验

2022年7月24日09:14:24

一个新的需求,需要动态添加选择条件,虽然可以实现了,但是在校验提示部分感觉欠佳,直接通过$message 的方式提示不够友好,最后通过网上示例完善校验,对部分几个点做个人总结。
记录vue+elementui 动态添加输入选择框并增加校验

实现思路:
1.由于vue是通过数据驱动展示页面内容,那么可以通过“添加条件”按钮往一个数组中添加对象,然后在下面展示区for循环遍历数组,从而动态生成输入表单。
2.已经完成了动态生成输入框/选择框。那么就是怎么加校验了。注意点来了,该循环的数组对象一点是要在这个form表单绑定的对象中才行:model="dialogForm",不然如果是一个当独定义的字段对象是没办法加入到表单校验中的。其他的rules定义方式跟网上其他的一致。
这里存在一个问题,当我点击“添加条件”按钮时,如果有没填完的,应该校验提示下面遍历出来部分的表单项,但是通过整个表单ref对象校验时会连带上面部分的一起校验。目前想到的解决方式是①点击“添加条件”按钮时通过$message方式提示还有未填的,②把上下部分拆分成两个表单,在点“添加条件”时只校验下面个表单,而在点保存按钮时校验两个表单的输入项。

目前偷懒没分两个表单而是通过消息提示的方式。

<el-dialog:visible.sync="dialogVisible":title="dialogTitle"  append-to-body @close="closeDialogVisible"><el-form:model="dialogForm" ref="dialogFormRef":rules="rules" label-width="110px" label-position="right"><el-divider content-position="left">常规</el-divider><el-row><el-col:span="20":offset="2"><el-form-item label="名称" prop="name":rules="[{required:true,message:'请输入',trigger:'blur'}]"><el-input v-model.trim="dialogForm.name"></el-input></el-form-item></el-col></el-row><el-row><el-col:span="20":offset="2"><el-form-item label="描述" prop="desc"><el-input type="textarea":rows="3" v-model.trim="dialogForm.desc"></el-input></el-form-item></el-col></el-row><el-divider content-position="left">条件<el-button type="primary" size="mini" @click="addCondition">添加条件</el-button></el-divider><div v-if="dialogForm.conditionList && dialogForm.conditionList.length>0"><div v-for="(item,index) in dialogForm.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-select v-model="item.conditionType" placeholder="请选择"><el-option v-for="item in status.conditionTypeList":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+'.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 v-rulecode="''" plain 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><span slot="footer"class="dialog-footer"><el-button @click="closeDialogVisible">取 消</el-button><el-button type="primary"  @click="addNew">保存</el-button></span></el-dialog>
//通过在data中定义
dialogForm:{ 
     name:null,
     desc:null,
     conditionList:[]},
rules:{
     conditionType:[{required:true,message:'请选择',trigger:'change'}],
     conditionChoose:[{required:true,message:'请选择',trigger:'change'}],
     conditionObj:[{required:true,message:'请选择',trigger:'change'}]}
//"添加条件"addCondition(){if(this.dialogForm.conditionList.length==0){this.dialogForm.conditionList.push({conditionType:null,conditionChoose:null,conditionObj:[]})}elseif(this.dialogForm.conditionList.length>0){let hasValue=false;for(let i=0;i<this.dialogForm.conditionList.length;i++){if(!this.dialogForm.conditionList[i].conditionType||!this.dialogForm.conditionList[i].conditionChoose||this.dialogForm.conditionList[i].conditionObj.length==0){
                  hasValue=true;break;}}if(hasValue){returnthis.$message.warning("请先选择未选择项");}else{this.dialogForm.conditionList.push({conditionType:null,conditionChoose:null,conditionObj:[]})}}},//删除delRow(row,index){this.dialogForm.conditionList.splice(index,1);},//保存校验addNew(){this.$refs["dialogFormRef"].validate((valid)=>{if(valid){}})},

其实在element-ui文档组件示例中也有动态添加表单组件功能

  • 作者:过去式的美好
  • 原文链接:https://gelibin.blog.csdn.net/article/details/122603512
    更新时间:2022年7月24日09:14:24 ,共 3887 字。