記錄--使用el-time-picker默認(rèn)值遇到的問題

更新時(shí)間：2022年09月02日 09:39:40 作者：被推著走的CV碼農(nóng)

這篇文章主要介紹了記錄--使用el-time-picker默認(rèn)值遇到的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用el-time-picker默認(rèn)值問題

首先文檔有指出不同組件的默認(rèn)值default-value類型區(qū)別；

el-time-picker默認(rèn)值的類型為new Date()，而el-time-select的默認(rèn)值類型為string

所以首先要知道是用的哪種組件再設(shè)置；

再一個(gè)是new Date()需要設(shè)置的是完整的日期時(shí)間，如果你要使用el-time-picker設(shè)置默認(rèn)值需要這樣new Date(0, 0, 0, 0, 0, 0)顯示時(shí)間就會(huì)是00:00:00；前三位是年月日后三位時(shí)分秒，因?yàn)槲覀兪怯玫氖菚r(shí)間插件所以改動(dòng)后三位即可；使用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="時(shí)間"
	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)時(shí)間展示

<el-form-item label="時(shí)間段" prop="meal_time">
  <el-time-picker
    v-model="meal_temp.meal_time"
    is-range
    range-separator="至"
    start-placeholder="開始時(shí)間"
    end-placeholder="結(jié)束時(shí)間"
    placeholder="選擇時(shí)間范圍"
    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')

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

您可能感興趣的文章:

相關(guān)文章

vue分頁插件的使用方法
這篇文章主要介紹了vue分頁插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
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是沒有這個(gè)組件的,我們就要自己去寫了,下面這篇文章主要給大家介紹了關(guān)于el-select與el-tree結(jié)合使用實(shí)現(xiàn)樹形結(jié)構(gòu)多選框的相關(guān)資料,需要的朋友可以參考下
2022-10-10
Vue實(shí)現(xiàn)用戶沒有登陸時(shí),訪問后自動(dòng)跳轉(zhuǎn)登錄頁面的實(shí)現(xiàn)思路
這篇文章主要介紹了Vue實(shí)現(xiàn)用戶沒有登陸時(shí)，訪問后自動(dòng)跳轉(zhuǎn)登錄頁面,定義路由的時(shí)候配置屬性，這里使用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)生成動(dòng)態(tài)標(biāo)簽
這篇文章主要給大家介紹了關(guān)于Vue.js如何利用v-for循環(huán)生成動(dòng)態(tài)標(biāo)簽的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
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)目中的使用，以及一個(gè)SplitPanel的組件。
2021-05-05
vue開發(fā)中關(guān)于axios的封裝過程
這篇文章主要介紹了vue開發(fā)中關(guān)于axios的封裝過程，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
使用mint-ui開發(fā)項(xiàng)目的一些心得(分享)
下面小編就為大家?guī)硪黄褂胢int-ui開發(fā)項(xiàng)目的一些心得(分享)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09