記錄--使用el-time-picker默認(rèn)值遇到的問題
使用el-time-picker默認(rèn)值問題
首先文檔有指出不同組件的默認(rèn)值default-value類型區(qū)別；
el-time-picker默認(rèn)值的類型為new Date()，而el-time-select的默認(rèn)值類型為string
所以首先要知道是用的哪種組件再設(shè)置；
再一個是new Date()需要設(shè)置的是完整的日期時間，如果你要使用el-time-picker設(shè)置默認(rèn)值需要這樣new Date(0, 0, 0, 0, 0, 0)顯示時間就會是00:00:00；前三位是年月日后三位時分秒，因?yàn)槲覀兪怯玫氖菚r間插件所以改動后三位即可；使用el-time-select則設(shè)置字符串00:00即可；
value-format可以設(shè)置el-time-picker綁定值顯示格式，具體可以查看文檔，我這里設(shè)置的是value-format="HH:mm:ss"
示例代碼：
//el-time-picker <el-time-picker placeholder="時間" v-model="time" value-format="HH-mm-ss" :default-value="new Date(0, 0, 0, 1, 0, 0)" ></el-time-picker>
el-time-picker 默認(rèn)時間展示
<el-form-item label="時間段" prop="meal_time">
<el-time-picker
v-model="meal_temp.meal_time"
is-range
range-separator="至"
start-placeholder="開始時間"
end-placeholder="結(jié)束時間"
placeholder="選擇時間范圍"
value-format="HH:mm:ss"
@input="meal_time_update"
/>
</el-form-item>this.meal_temp.meal_time = []
this.meal_temp.meal_time.push('00:00:00', '23:59:59')以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue分頁插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
vue中使用vee-validator完成表單校驗(yàn)方案
vee-validator是一種基于vue模板的輕量級校驗(yàn)框架。本文主要討論的是vee-validator校驗(yàn)方案，感興趣的朋友跟隨小編一起看看吧2019-11-11
el-select與el-tree結(jié)合使用實(shí)現(xiàn)樹形結(jié)構(gòu)多選框
我們在實(shí)際開發(fā)中需要用到下拉樹,elementUI是沒有這個組件的,我們就要自己去寫了,下面這篇文章主要給大家介紹了關(guān)于el-select與el-tree結(jié)合使用實(shí)現(xiàn)樹形結(jié)構(gòu)多選框的相關(guān)資料,需要的朋友可以參考下2022-10-10
Vue實(shí)現(xiàn)用戶沒有登陸時,訪問后自動跳轉(zhuǎn)登錄頁面的實(shí)現(xiàn)思路
這篇文章主要介紹了Vue實(shí)現(xiàn)用戶沒有登陸時，訪問后自動跳轉(zhuǎn)登錄頁面,定義路由的時候配置屬性，這里使用needLogin標(biāo)記訪問頁面是否需要登錄，本文通過實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-02-02
vue項(xiàng)目中created()被調(diào)用多次的踩坑實(shí)戰(zhàn)
在vue項(xiàng)目中我在created中調(diào)用了兩次get數(shù)據(jù)請求,所以下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中created()被調(diào)用多次的踩坑實(shí)戰(zhàn),需要的朋友可以參考下2023-03-03
Vue.js如何利用v-for循環(huán)生成動態(tài)標(biāo)簽
這篇文章主要給大家介紹了關(guān)于Vue.js如何利用v-for循環(huán)生成動態(tài)標(biāo)簽的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-01-01
VUE配置proxy代理的開發(fā)測試及生產(chǎn)環(huán)境
這篇文章主要為大家介紹了VUE配置proxy代理的開發(fā)環(huán)境、測試環(huán)境、生產(chǎn)環(huán)境詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vue Element前端應(yīng)用開發(fā)之樹列表組件
本篇隨筆主要介紹樹列表組件和下拉列表樹組件在項(xiàng)目中的使用，以及一個SplitPanel的組件。2021-05-05
這篇文章主要介紹了vue開發(fā)中關(guān)于axios的封裝過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
使用mint-ui開發(fā)項(xiàng)目的一些心得(分享)
下面小編就為大家?guī)硪黄褂胢int-ui開發(fā)項(xiàng)目的一些心得(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09