【vue】使用el-date-picker遇到的坑：回顯後沒法更新數據

<el-form-item label="選擇日期：" prop="timeArrange" required :label-width="formLabelWidth"

        >

          <el-date-picker class="info-form-times" v-model="form.timeArrange" type="daterange" unlink-panels value-format="timestamp" range-separator="至" start-placeholder="起始年月日" end-placeholder="結束年月日" @change="handleTimestamp"

          ></el-date-picker>

        </el-form-item>

 

 

我在使用elementUI裏的日期選擇器時，遇到了當沒有設置選擇器的初始值，首次打開，選擇日期後，能夠拉起@change事件；而當設置好回顯值（初始值）時，沒法拉起change事件的問題。

官網的el-date-picker組件的事件有如下三種：

官方文檔中的事件

通過測試，當事件綁定改成blur時，拉起handleTimestamp方法成功。看來緣由出在事件監聽的方式綁定上面。

@blur="handleTimestamp"

咱們再看一下源碼中，爲何是blur才行：

node_modules裏，date-picker組件源碼

node_modules裏，date-picker組件內監聽picker顯示隱藏屬性里拉起blur函數，但未拉起change函數。

使用blur事件驅動日期選擇器數據問題，完美解決。