Element UI 日期选择器:在校验前手动清空操作
<template>
<el-form-item label='所得期间起:' prop='incomePeriodDateStart'>
<el-date-picker
clearable
size='small'
v-model='form.incomePeriodDateStart'
type='date'
value-format='yyyy-MM-dd'
placeholder='选择所得期间起'
style='width: 170px'
:picker-options='datePickerOptions'
:disabled='isEditing'
@focus='clearIncomePeriodDateStart'
>
</el-date-picker>
</el-form-item>
</template>
<script>
export default {
data() {
return {
form: {
incomePeriodDateStart: ''
},
datePickerOptions: {
disabledDate: (time) => {
// 设置禁用日期的逻辑
}
},
isEditing: false
}
},
methods: {
clearIncomePeriodDateStart() {
this.form.incomePeriodDateStart = '';
}
}
}
</script>
<p>在第一次校验之前手动执行清空操作可以通过添加<code>@focus</code>事件监听器来实现。具体操作如下:</p>
<p>通过添加<code>@focus</code>事件监听器,在用户聚焦到该日期选择器时,会执行<code>clearIncomePeriodDateStart</code>方法,将<code>form.incomePeriodDateStart</code>置为空字符串,从而实现手动执行清空操作。</p>
原文地址: https://www.cveoy.top/t/topic/bMOO 著作权归作者所有。请勿转载和采集!