解決Element中el-date-picker組件不回填的情況
1.問題描述
當(dāng)我們?cè)趯?shí)用ElementUI組件完成項(xiàng)目的時(shí)候可能會(huì)遇到這樣的需求，比如：
新建一個(gè)活動(dòng)，需要定義活動(dòng)的時(shí)間范圍；
因此我們?cè)谛陆ɑ顒?dòng)的操作過程中需要選擇一段時(shí)間區(qū)間以及活動(dòng)名稱等信息提交，新建完成；
網(wǎng)頁(yè)上出現(xiàn)了新建好的活動(dòng)，其他人想查看詳細(xì)信息，打開頁(yè)面，發(fā)現(xiàn)時(shí)間區(qū)間并沒有實(shí)現(xiàn)回填！
2.問題分析
時(shí)間信息沒有回填，首先要檢查，后臺(tái)數(shù)據(jù)返回情況以及頁(yè)面上字段信息是否有差異等細(xì)節(jié)；
如果沒有以上的情況，那就是我碰到的這種情況了，
后端數(shù)據(jù)返回沒有差異，而且頁(yè)面字段也沒有錯(cuò)，其他的信息也正常回填，唯獨(dú)時(shí)間不回填，同時(shí)也伴隨一次回填后續(xù)不回填等諸多情況。總結(jié)來說就是：頁(yè)面與數(shù)據(jù)不同步！
3.解決辦法
打印一下就能知道el-date-picker區(qū)間時(shí)間組件的數(shù)據(jù)其實(shí)是Array
所以，我們一般從后臺(tái)拿到數(shù)據(jù)后進(jìn)行回填操作如下：
getDetails (obj){
// form.daterange是el-date-picker組件v-model的變量
this.form.daterange[0] = obj.startTime;
this.form.daterange[1] = obj.endTime;
}
然而，頁(yè)面上經(jīng)常不顯示，其實(shí)我們這樣做也是沒問題的，這是element UI自身存在的bug吧，不光日期選擇組件有這個(gè)問題，有時(shí)候下拉框也會(huì)偶爾出現(xiàn)此類現(xiàn)象，但是我們可以稍稍修改一下就沒問題了，如下：
getData (obj) {
this.form.daterange = [obj.startTime, obj.endTime]
}
這是最簡(jiǎn)單的實(shí)現(xiàn)了，還有其他的方法也是可以，只要能實(shí)現(xiàn)我們的需求可以盡量嘗試一些其他方式，在此就不一一列舉了。
補(bǔ)充知識(shí)：vue中使用elementUI的下拉框（el-dropdown）添加點(diǎn)擊事件無效的解決方案
你會(huì)發(fā)現(xiàn)，使用這種方式綁定事件是無效
正確方式 @click.native綁定點(diǎn)擊事件
以上這篇解決Element中el-date-picker組件不回填的情況就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目實(shí)例中用query傳參如何實(shí)現(xiàn)跳轉(zhuǎn)效果
這篇文章主要介紹了vue項(xiàng)目實(shí)例中用query傳參如何實(shí)現(xiàn)跳轉(zhuǎn)效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)pc端拍照上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue的組件化給前端開發(fā)帶來極大的便利,下面這篇文章主要給大家介紹了關(guān)于Vue子父組件之間傳值的三種方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
vue給數(shù)組中對(duì)象排序 sort函數(shù)的用法
這篇文章主要介紹了vue給數(shù)組中對(duì)象排序 sort函數(shù)的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
基于Vue方法實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器
這篇文章主要為大家詳細(xì)介紹了基于Vue方法實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue中異步函數(shù)async和await的用法說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue組件高級(jí)通訊之$children與$parent
這篇文章主要為大家介紹了Vue組件高級(jí)通訊之$children與$parent，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Vue.js在設(shè)計(jì)上采用MVVM模式，當(dāng)View視圖層發(fā)生變化時(shí)，會(huì)自動(dòng)更新到ViewModel.接下來通過本文給大家分享Vue.js實(shí)現(xiàn)列表清單的操作方法，需要的朋友參考下吧2017-11-11
相信大家做項(xiàng)目的時(shí)候,功能中都有導(dǎo)出模塊,下面這篇文章主要給大家介紹了關(guān)于vue導(dǎo)出excel表格的詳細(xì)教程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
Vue.js（讀音 /vjuː/, 類似于 view）是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的庫(kù)。這篇文章主要介紹了Vue 短信驗(yàn)證碼組件開發(fā)詳解,需要的朋友可以參考下2017-02-02