1.問題描述

當我們在實用ElementUI元件完成專案的時候可能會遇到這樣的需求，比如：

新建一個活動，需要定義活動的時間範圍；

因此我們在新建活動的操作過程中需要選擇一段時間區間以及活動名稱等資訊提交，新建完成；

網頁上出現了新建好的活動，其他人想檢視詳細資訊，開啟頁面，發現時間區間並沒有實現回填！

2.問題分析

時間資訊沒有回填，首先要檢查，後臺資料返回情況以及頁面上欄位資訊是否有差異等細節；

如果沒有以上的情況，那就是我碰到的這種情況了，

後端資料返回沒有差異，而且頁面欄位也沒有錯，其他的資訊也正常回填，唯獨時間不回填，同時也伴隨一次回填後續不回填等諸多情況。總結來說就是：頁面與資料不同步！

3.解決辦法

列印一下就能知道el-date-picker區間時間元件的資料其實是Array

所以，我們一般從後臺拿到資料後進行回填操作如下：

getDetails (obj){
 // form.daterange是el-date-picker元件v-model的變數
 this.form.daterange[0] = obj.startTime;
 this.form.daterange[1] = obj.endTime;
}

然而，頁面上經常不顯示，其實我們這樣做也是沒問題的，這是element UI自身存在的bug吧，不光日期選擇元件有這個問題，有時候下拉框也會偶爾出現此類現象，但是我們可以稍稍修改一下就沒問題了，如下：

getData (obj) {
 this.form.daterange = [obj.startTime,obj.endTime]
}

這是最簡單的實現了，還有其他的方法也是可以，只要能實現我們的需求可以儘量嘗試一些其他方式，在此就不一一列舉了。

補充知識：vue中使用elementUI的下拉框（el-dropdown）新增點選事件無效的解決方案

你會發現，使用這種方式繫結事件是無效

正確方式 @click.native繫結點選事件

以上這篇解決Element中el-date-picker元件不回填的情況就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。