字段: 去/返程日期(deptDate), 去/返程班次(flghtTrainSchedNo)
- 页面一进入时,都为非必填项,
- 逻辑出现必填的范围只有飞机和火车,汽车和自驾没有必填的验证
- 如果用户操作了,其中一项,两者都为必填
- 如果用户删除了一项且另一项无值时,变为非必填
- 如果先点击了飞机或火车再去点击汽车和自驾,则取消验证必填项
- 使用监听触发验证和取消验证
简单的描述: 两者一个有值时,验证,都无值时不验证
HTML片段
<div class="" v-for="(item,i) in form.tripTcktList" :key="'form.tripTcktList'+i">
<div class="formlist">
<el-form-item :label="(item.roundTripInd ===1?'去':'返')+'程日期'"
:prop="'tripTcktList.' + i + '.deptDate'"
:rules="{ required: item.tripRequireStt, message: '日期不能为空', trigger: 'blur' }"
>
<el-date-picker value-format="timestamp" v-model="item.deptDate" class="width-100-per" type="date"
placeholder="选择日期"></el-date-picker>
</el-form-item>
<el-form-item label="" prop=""></el-form-item>
</div>
<div class="formlist" v-if="item.tcktBoughtSttusCode==='16702'">
<el-form-item :label="(item.roundTripInd ===1?'去':'返')+'程班次'" class="inline-block"
:prop="'tripTcktList.' + i + '.flghtTrainSchedNo'"
:rules="{ required: item.tripRequireStt, message: '请填写航班号/车次/自驾', trigger: 'blur' }"
>
<el-input v-model.trim="item.flghtTrainSchedNo" @keyup.native="transLetter('form.tripTcktList.' + i + '.flghtTrainSchedNo',i,item.roundTripInd ===1?'dept':'arvl',item,queryNo)" @blur="queryNo(i,item.roundTripInd ===1?'dept':'arvl',item)" placeholder="请填写航班号/车次/自驾"></el-input>
</el-form-item>
<el-form-item label="" prop=""></el-form-item>
</div>
</div>
注意的关键点: :rules="{ required: item.tripRequireStt, message: '请填写航班号/车次/自驾', trigger: 'blur' }"
,这里的item.tripRequireStt
默认值时false
JS片段
computed: {
// 监听出行信息的必填状态
judgeTripRequireStt(){
return this.form.tripTcktList
},
},
/**出行信息的状态 - 深度监听
* idea:
* - 1. 只有自行购票时才会触发逻辑
* - 2. 只有在选择16601、16602时,才会去做判断;反之状态设置为false
*/
judgeTripRequireStt: {
handler (n) {
if(this.form.selfBuyTripTcktInd === 1){
// 当选择自行购票的时候 去程日期、去程班次、返程日期、返程班次都可以为空
// 但是如果选择方式为火车、飞机时,只要填了去程日期/返程日期,则去程班次/返程班次必填
// 只要填了去程班次/返程班次,则去程日期/返程日期必填
let isRequire = false
n.forEach((item,i)=>{
if(item.deptTrnsprtCode ==='16601' || item.deptTrnsprtCode ==='16602'){
if(item.deptDate||item.flghtTrainSchedNo){
item.tripRequireStt = true
}else{
item.tripRequireStt = false
}
}else{
item.tripRequireStt = false
this.$refs.form.clearValidate('tripTcktList.'+ i +'.flghtTrainSchedNo')
this.$refs.form.clearValidate('tripTcktList.'+ i +'.deptDate')
}
})
}
},
deep: true
},
在这里掉进过一个坑, 清楚字段验证时要使用拼接的字段,而不是使用下标, 切记!!!