<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>
Element UI 日期选择器:在校验前手动清空操作

原文地址: https://www.cveoy.top/t/topic/bMOO 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录