一个新的需求,需要动态添加选择条件,虽然可以实现了,但是在校验提示部分感觉欠佳,直接通过$message
的方式提示不够友好,最后通过网上示例完善校验,对部分几个点做个人总结。
实现思路:
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:[]})
}else if(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){
return this.$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文档组件示例中也有动态添加表单组件功能