快捷導(dǎo)航

簡(jiǎn)單設(shè)置el-date-picker的默認(rèn)當(dāng)前時(shí)間問題

更新時(shí)間：2022年10月25日 10:37:03 作者：small面包

這篇文章主要介紹了簡(jiǎn)單設(shè)置el-date-picker的默認(rèn)當(dāng)前時(shí)間問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

設(shè)置el-date-picker的默認(rèn)當(dāng)前時(shí)間

這是顯示當(dāng)前時(shí)間，每次點(diǎn)開彈框都是當(dāng)前的時(shí)間實(shí)現(xiàn)效果很簡(jiǎn)單

//html
<el-form-item
   label="創(chuàng)建時(shí)間"
   :label-width="formLabelWidth"
>
  <el-date-picker
    v-model="addForm.createDate"
    style="width:100%"
     type="datetime"
     placeholder="選擇日期"
   />
</el-form-item>

//data里的數(shù)據(jù)
data(){
	addForm:{
		createDate:new Date()
	}
}
//點(diǎn)擊關(guān)閉的彈框
closeDialog() {
  this.addForm = {}
  this.addForm.createDate = new Date()
},

el-date-picker 設(shè)置、讀取值

el-date-picker 設(shè)置默認(rèn)值

記一個(gè)DateTimePicker 日期時(shí)間選擇器的坑

今天遇到一個(gè)問題。用日期時(shí)間選擇器選擇后，在編輯頁(yè)面回顯的問題。

一、我們?cè)谌?shù)據(jù)時(shí)

在一般的輸入框，我們都可以使用v-model中的值，直接賦值。可是這個(gè)時(shí)間選擇器卻不太一樣，因?yàn)椋麑?duì)應(yīng)兩個(gè)值，一個(gè)開始時(shí)間，一個(gè)結(jié)束時(shí)間，以數(shù)組的形式存在v-model中。

取數(shù)據(jù)時(shí)，常常要這樣

二、在設(shè)置默認(rèn)值時(shí)

在回顯時(shí)，官方給的方法是

顯然，沒有后端會(huì)這樣返回?cái)?shù)據(jù)。

三、解決方法

不管哪種方法，v-model綁定的默認(rèn)值，我們都應(yīng)該設(shè)置為空數(shù)組而不是空字符串。

1、(不推薦)

使用此種形式，分別為v-model綁定的數(shù)據(jù)賦值。

不推薦的原因：這樣雖然可以賦上值，但是

紅框處，卻不會(huì)顯示數(shù)據(jù)，顯然，這樣是行不通的。

2、(推薦)

this.formDate = [response.data.taskStarTime, response.data.taskEndTime]

直接這樣賦值，就會(huì)完全顯示

文中的后端返回的數(shù)據(jù)格式

"taskStarTime":"2019-03-12 00:00:00",

"taskEndTime":"2019-04-25 00:00:00

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue中methods的this指向問題淺析
相信我們寫Vue代碼時(shí)肯定都會(huì)在methods中用過this這個(gè)關(guān)鍵字，甚至還打印過this查看其內(nèi)容。最終發(fā)現(xiàn)該實(shí)例對(duì)象竟然是我們的Vue實(shí)例對(duì)象
2022-10-10
vue打包更新packge.json版本號(hào)的全過程
這篇文章主要介紹了vue打包更新packge.json版本號(hào)的全過程,文章通過圖文結(jié)合的方式給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-08-08
vue路由切換之淡入淡出的簡(jiǎn)單實(shí)現(xiàn)
今天小編就為大家分享一篇vue路由切換之淡入淡出的簡(jiǎn)單實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2019-10-10
vue axios post發(fā)送復(fù)雜對(duì)象問題
現(xiàn)在vue項(xiàng)目中，一般使用axios發(fā)送請(qǐng)求去后臺(tái)拉取數(shù)據(jù)。這篇文章主要介紹了vue axios post發(fā)送復(fù)雜對(duì)象的一點(diǎn)思考,需要的朋友可以參考下
2019-06-06
Vue?實(shí)現(xiàn)接口進(jìn)度條示例詳解
這篇文章主要介紹了Vue實(shí)現(xiàn)接口進(jìn)度條功能，在請(qǐng)求數(shù)據(jù)的過程中，需要添加監(jiān)聽函數(shù)來(lái)監(jiān)測(cè)數(shù)據(jù)請(qǐng)求的過程變化，并更新組件相應(yīng)的屬性和界面元素,本文結(jié)合實(shí)例代碼詳細(xì)講解，需要的朋友可以參考下
2023-04-04
vue引入靜態(tài)js文件的方法
這篇文章主要介紹了vue引入靜態(tài)js文件的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-06-06
關(guān)于Vue3使用axios的配置教程詳解
道axios是一個(gè)庫(kù),并不是vue中的第三方插件,下面這篇文章主要給大家介紹了關(guān)于Vue3使用axios的配置教程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-04-04
vue 指令和過濾器的基本使用(品牌管理案例)
這篇文章主要介紹了vue-品牌管理案例-指令和過濾器的相關(guān)知識(shí)，文中通過代碼給大家介紹了過濾器的基本使用,需要的朋友可以參考下
2019-11-11
vue3中?provide?和?inject?用法及原理
這篇文章主要介紹vue3中?provide?和?inject?用法及原理，provide?和?inject可以?解決多次組件傳遞數(shù)據(jù)的問題，下面文章是具體的用法和實(shí)現(xiàn)原理,具有一定的參考價(jià)值，需要的朋友可以參考一下，希望對(duì)大家有所幫助
2021-11-11
vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊(cè)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊(cè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09