赞
踩
需求一:
<el-form-item label="证件有效期:" prop="CertValType"> <el-radio-group v-model="RealNameAuthForm.CertValType" @input="radioChange('cert')"> <el-radio label="short">短期</el-radio> <el-radio label="long">长期</el-radio> </el-radio-group> </el-form-item> <el-form-item :prop="RealNameAuthForm.CertValType==='short'?'shortTime':'longTime'"> <el-date-picker v-show="RealNameAuthForm.CertValType==='short'" value-format="yyyy-MM-dd" v-model="RealNameAuthForm.shortTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> <el-date-picker v-show="RealNameAuthForm.CertValType==='long'" value-format="yyyy-MM-dd" v-model="RealNameAuthForm.longTime" type="date" placeholder="开始日期"> </el-date-picker> </el-form-item>
RealNameAuthForm: {
CertValType: 'short',//证件有效期
shortTime: '',
longTime: '',
},
realNameAuthRules: {
CertValType: [{ required: true, message: '请选择证件有效期', trigger: 'blur' }],
shortTime: [{ required: true, message: '请选择证件有效期', trigger: 'change' }],
longTime: [{ required: true, message: '请选择证件有效期', trigger: 'change' }],
},
radioChange(val) {
if(val==='busi') {
// 营业期限置空
this.businessForm.shortTime = ''
this.businessForm.longTime = ''
return
}
if(val==='cert') {
// 证件有效期置空
this.RealNameAuthForm.shortTime = ''
this.RealNameAuthForm.longTime = ''
return
}
},
需求二:
<el-form-item label="活动结束时间:" prop="activityEndRadio"> <el-radio-group v-model="activityForm.activityEndRadio" @input="radioChange('acEnd')"> <el-radio label="1">手动关闭</el-radio> <el-radio label="2">定时关闭</el-radio> </el-radio-group> </el-form-item> <!-- 这里必须用v-if,否则rule校验会出问题 --> <!-- 此处不能模仿需求一( :prop="activityForm.activityEndRadio?'activityEndTime':''" ),会出问题;个人猜测是因为prop不能等于空串 --> <el-form-item v-if="activityForm.activityEndRadio==='2'" label="" prop="activityEndTime"> <el-date-picker :picker-options="pickerOptions0" :disabled="isView" value-format="yyyy-MM-dd HH:mm:ss" v-model="activityForm.activityEndTime" type="datetime" placeholder="选择日期时间"> </el-date-picker> </el-form-item>
data() { return { activityForm: { activityEndRadio: '1', activityEndTime: '',//活动结束时间 }, activityFormRules: { activityEndRadio: [ {message: '',trigger: 'change', required: true,}, ], activityEndTime: [ { required: true, message: '请选择活动结束时间', trigger: 'blur' } ], }, } }, computed: { //只允许选择系统当前时间往后的时间 pickerOptions0() { let that = this; let hour = new Date().getHours(); let min = new Date().getMinutes(); return { // 日期选择限制 disabledDate: time => { return time.getTime() <= new Date() - (24 * 60 * 60 * 1000); }, // 时间选择限制 selectableRange: `${hour}:${min}:00 - 23:59:00` }; }, },
radioChange(val) {
if(val==='acEnd') {
// 活动结束时间置空
if(this.activityForm.activityEndRadio==='1') {
this.activityForm.activityEndTime = ''
}
return
}
},
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。