el-form-item label=会计期间: required rules=rulesstartAccountingTime el-col span=8 el-form-item el-date-picker ref=startPicker clearabl
如果在选择日期后,需要更新picker-options的disabledDate函数,可以通过监听v-model的变化,在变化后更新picker-options中的disabledDate函数。具体实现如下:
- 在data中定义一个变量,用于监听v-model的变化:
data() {
return {
form: {
startAccountingTime: '', // 起始日期
endAccountingTime: '' // 结束日期
},
pickerOptions: {
disabledDate: time => {
return time.getTime() > new Date(this.form.endAccountingTime).getTime();
}
}
}
}
- 在watch中监听v-model的变化,更新picker-options:
watch: {
'form.startAccountingTime': function(newVal) {
this.pickerOptions.disabledDate = time => {
return time.getTime() > new Date(this.form.endAccountingTime).getTime();
}
},
'form.endAccountingTime': function(newVal) {
this.pickerOptions.disabledDate = time => {
return time.getTime() < new Date(this.form.startAccountingTime).getTime();
}
}
}
- 在el-date-picker中,将picker-options绑定到:picker-options属性上:
<el-date-picker
ref="startPicker"
clearable
size="mini"
v-model="form.startAccountingTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择起始日期"
style="width: 130px"
:picker-options="pickerOptions"
></el-date-picker>
<el-date-picker
ref="endPicker"
clearable
size="mini"
v-model="form.endAccountingTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择结束日期"
style="width: 130px"
:picker-options="pickerOptions"
></el-date-picker>
这样,在选择日期后,picker-options中的disabledDate函数就会更新,实现了根据选择的日期来禁用/启用相应的日期
原文地址: https://www.cveoy.top/t/topic/iR4Q 著作权归作者所有。请勿转载和采集!