element-ui的日期選擇框底部清空按鈕點選不關閉日期選擇框的實現辦法

all2005發表於2021-12-27
UI

image.png
最近遇到個需求，要求點選底部”清空“按鈕不關閉日期框，element-ui是預設點選關閉的，查官方文件也沒有給出配置項或者回撥，因此只有自己想辦法實現了。我的做法是監聽change事件，當點選清空的時候時間值為null，然後在裡面開啟日期框。具體程式碼如下：

模板

<el-date-picker
    ref="datePicker"
    v-model="timeSelect"
    type="datetimerange"
    range-separator="至"
    start-placeholder="開始時間"
    end-placeholder="結束時間"
    placeholder="選擇時間範圍"
    @change="selectTime"
    :picker-options="pickerOptions"
    :default-time="['00:00:00', '23:59:59']"
  >
</el-date-picker>

js

selectTime(v) {
  // 點清空按鈕
  if (v === null) {
    this.$refs.datePicker.showPicker()
    this.timeSelect = []
    return
  }
}

相關文章