【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事件驅動日期選擇器數據問題，完美解決。