快捷導(dǎo)航

vue?el-date-picker?日期回顯后無法改變問題解決

更新時(shí)間：2023年04月11日 14:24:11 作者：阿wei程序媛

這篇文章主要介紹了vue?el-date-picker?日期回顯后無法改變問題解決,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

場(chǎng)景描述：點(diǎn)擊修改，數(shù)據(jù)回顯渲染，后端返回我的是startTime和endTime，我需要將其處理，放到一個(gè)數(shù)組里面，并將其賦值

后端返回?cái)?shù)據(jù)

   <el-form-item label="適用時(shí)間" prop="time1">
          <el-date-picker
            v-model="form.time1"
            type="datetimerange"
            style="width: 380px"
            :default-time="['00:00:00', '23:59:59']"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="expireTimeOPtion"
            @change="beginDateChange"
            start-placeholder="開始日期"
            end-placeholder="結(jié)束日期">
          </el-date-picker>
        </el-form-item>

 handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      var array=[]
      getfuelRates(id).then(response => {
        this.form = response.data;        
        array.push(response.data.startTime,response.data.endTime)
        this.form.time1=array
        this.open = true;
        this.title = "修改";
      });
    },

這樣寫，就會(huì)出現(xiàn)問題，數(shù)據(jù)回顯成功之后，無法改變，如下圖

解決方法：

  handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      var array=[]
      getfuelRates(id).then(response => {
        this.form = response.data;        
        array.push(response.data.startTime,response.data.endTime)
        this.$set(this.form,'time1',array);
        this.form.time1=array
        this.open = true;
        this.title = "修改";
      });
    },

或者

  handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getfuelRates(id).then(response => {
        this.form = response.data;
        this.$set(this.form,'time1',[response.data.startTime,response.data.endTime]);
        this.form.time1=array
        this.open = true;
        this.title = "修改燃油附加費(fèi)";
      });
    },

重點(diǎn)代碼：

this.$set(this.form,'time1',XXX);

以上就能實(shí)現(xiàn)，如下圖

到此這篇關(guān)于vue el-date-picker 日期回顯后無法改變的文章就介紹到這了,更多相關(guān)vue el-date-picker 日期回顯內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)按鈕級(jí)權(quán)限方案
這篇文章主要介紹了Vue按鈕級(jí)權(quán)限方案，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-11-11
Vue中保存用戶登錄狀態(tài)實(shí)例代碼
本篇文章主要介紹了Vue中保存用戶登錄狀態(tài)實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。、
2017-06-06
老生常談Vue中的偵聽器watch
開發(fā)中我們?cè)赿ata返回的對(duì)象中定義了數(shù)據(jù)，這個(gè)數(shù)據(jù)通過插值語(yǔ)法等方式綁定到template中，這篇文章主要介紹了Vue中的偵聽器watch,需要的朋友可以參考下
2022-10-10
npm install sentry-cli失敗的問題解決
本文主要介紹了npm install sentry-cli失敗的問題解決,文章首先描述了問題現(xiàn)象,然后分析了問題的原因,具有一定的參考價(jià)值,感興趣的可以了解一下
2023-08-08
解析vue、angular深度作用選擇器
在 Vue 的開發(fā)中，我們經(jīng)常會(huì)用到外部組件庫(kù)，這篇文章主要介紹了vue、angular深度作用選擇器,需要的朋友可以參考下
2019-09-09
vue數(shù)組動(dòng)態(tài)刷新失敗問題及解決
這篇文章主要介紹了vue數(shù)組動(dòng)態(tài)刷新失敗問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue中Mixin的正確用法詳解
眾所周知，vue 的 mixins 是個(gè)非常靈活，但又很容易帶來混亂的 API，Mixins 本該是一種強(qiáng)大的重用代碼的手段，但使用之后往往帶來更多的混亂，代碼變得不易維護(hù)，本文就詳細(xì)介紹Vue Mixin的正確用法,需要的朋友可以參考下
2023-06-06
理理Vue細(xì)節(jié)（推薦）
這篇文章主要介紹了Vue細(xì)節(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Vue3使用組合式API實(shí)現(xiàn)代碼的邏輯復(fù)用
在 Vue 3 的生態(tài)中,組合式 API（Composition API）引入了全新的方式來構(gòu)建組件,使得邏輯復(fù)用變得更加簡(jiǎn)單和靈活,在傳統(tǒng)的選項(xiàng)API中,邏輯復(fù)用通常依賴于混入和高階組件,本文將通過示例,帶你了解如何在 Vue 3 中使用組合式 API 來實(shí)現(xiàn)代碼的邏輯復(fù)用
2025-01-01
VUE 記賬憑證模塊組件的示例代碼
這篇文章主要介紹了VUE記賬憑證模塊組件的實(shí)例代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-03-03