解決Element中el-date-picker組件不回填的情況
1.問題描述
當我們在實用ElementUI組件完成項目的時候可能會遇到這樣的需求，比如：
新建一個活動，需要定義活動的時間范圍；
因此我們在新建活動的操作過程中需要選擇一段時間區(qū)間以及活動名稱等信息提交，新建完成；
網(wǎng)頁上出現(xiàn)了新建好的活動，其他人想查看詳細信息，打開頁面，發(fā)現(xiàn)時間區(qū)間并沒有實現(xiàn)回填！
2.問題分析
時間信息沒有回填，首先要檢查，后臺數(shù)據(jù)返回情況以及頁面上字段信息是否有差異等細節(jié)；
如果沒有以上的情況，那就是我碰到的這種情況了，
后端數(shù)據(jù)返回沒有差異，而且頁面字段也沒有錯，其他的信息也正?；靥睿í殨r間不回填，同時也伴隨一次回填后續(xù)不回填等諸多情況?？偨Y(jié)來說就是：頁面與數(shù)據(jù)不同步！
3.解決辦法
打印一下就能知道el-date-picker區(qū)間時間組件的數(shù)據(jù)其實是Array
所以，我們一般從后臺拿到數(shù)據(jù)后進行回填操作如下：
getDetails (obj){
// form.daterange是el-date-picker組件v-model的變量
this.form.daterange[0] = obj.startTime;
this.form.daterange[1] = obj.endTime;
}
然而，頁面上經(jīng)常不顯示，其實我們這樣做也是沒問題的，這是element UI自身存在的bug吧，不光日期選擇組件有這個問題，有時候下拉框也會偶爾出現(xiàn)此類現(xiàn)象，但是我們可以稍稍修改一下就沒問題了，如下：
getData (obj) {
this.form.daterange = [obj.startTime, obj.endTime]
}
這是最簡單的實現(xiàn)了，還有其他的方法也是可以，只要能實現(xiàn)我們的需求可以盡量嘗試一些其他方式，在此就不一一列舉了。
補充知識：vue中使用elementUI的下拉框（el-dropdown）添加點擊事件無效的解決方案
你會發(fā)現(xiàn)，使用這種方式綁定事件是無效
正確方式 @click.native綁定點擊事件
以上這篇解決Element中el-date-picker組件不回填的情況就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
nuxt 服務(wù)器渲染動態(tài)設(shè)置 title和seo關(guān)鍵字的操作
這篇文章主要介紹了nuxt 服務(wù)器渲染動態(tài)設(shè)置 title和seo關(guān)鍵字的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
本篇文章主要介紹了VUE JS 使用組件實現(xiàn)雙向綁定，詳細的介紹了vue的雙向數(shù)據(jù)綁定原理以及核心代碼模塊，具有一定的參考價值，有興趣的可以了解一下。2017-01-01
詳解Vue.js組件可復用性的混合(mixin)方式和自定義指令
本篇文章主要介紹了詳解Vue.js組件可復用性的混合(mixin)方式和自定義指令，具有一定的參考價值，有興趣的可以了解一下2017-09-09
這篇文章主要介紹了ssm+vue前后端分離框架整合實現(xiàn)(附源碼)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要為大家詳細介紹了vue.js輪播圖組件使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
vite+vue3中require?is?not?defined問題及解決
這篇文章主要介紹了vite+vue3中require?is?not?defined問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue中使用/deep/失效的解決辦法,使用了css預處理器，則可以使用/deep/， 如果/deep/ 無效，則使用 ::v-deep，本文給大家講解的非常詳細需要的朋友可以參考下2022-11-11
vite+element-plus項目基礎(chǔ)搭建的全過程
最近看完Vue3和Vite文檔之后,就寫了個小demo,整體感覺下來還是很絲滑的,下面這篇文章主要給大家介紹了關(guān)于vite+element-plus項目基礎(chǔ)搭建的全過程,需要的朋友可以參考下2022-07-07
今天小編就為大家分享一篇vue中當圖片地址無效的時候,顯示默認圖片的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue?退出登錄?清除localStorage的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12