關(guān)于Element-UI：DateTimePicker組件 如何獲取它的值

如圖县爬，在query我得不到type和dictType的值矩桂，一直為undefined未定義，其實(shí)只要將他們的值改為組件里v-model綁定的值即可



此時(shí)床牧，數(shù)據(jù)成功返回給后端荣回，接口連接通暢



附上接口：


這個(gè)頁(yè)面代碼留在附件里，有需求自取參考

<template>

??<div?class="content">

????<!--?查看可預(yù)約場(chǎng)館?-->

????<el-card?shadow="hover"?style="margin-bottom:?15px;">

??????<div>

????????<el-row?style="line-height:?40px;">

??????????<!--?場(chǎng)館類型?-->

??????????<el-col?:span="4"?:xs="8"?class="_search-box">

????????????<div?style="float:?left;">

??????????????<span?class="span-size">場(chǎng)館類型：</span>

????????????</div>

????????????<el-select?v-model="typeName"?placeholder="請(qǐng)選擇"?@change="roomType">

??????????????<el-option

????????????????v-for="item?in?typeList"

????????????????:key="item.value"

????????????????:label="item.label"

????????????????:value="item.value"

??????????????></el-option>

????????????</el-select>

??????????</el-col>

??????????<!--?場(chǎng)館名稱?-->

??????????<el-col?:span="4"?:xs="20"?class="_search-box">

????????????<div?style="float:?left;">

??????????????<span?class="span-size">場(chǎng)館名稱：</span>

????????????</div>

????????????<el-select?v-model="dictTypeValue"?placeholder="請(qǐng)選擇"?@change="roomValue">

??????????????<el-option

????????????????v-for="item?in?dictTypeList"

????????????????:key="item.value"

????????????????:label="item.name"

????????????????:value="item.value"

??????????????></el-option>

????????????</el-select>

??????????</el-col>

??????????<!--?日期查詢?-->

??????????<el-col?:span="10"?:xs="16"?class="_search-box">

????????????<div?style="float:?left;">

??????????????<span?class="span-size">日期查詢：</span>

????????????</div>

????????????<!--?<el-date-picker

??????????????v-model="value"

??????????????align="right"

??????????????type="date"

??????????????placeholder="選擇日期"

??????????????@change="getDateTime"

??????????????format="yyyy?年?MM?月?dd?日"

??????????????value-format="yyyy-MM-dd"

??????????????:picker-options="pickerOptions"

????????????></el-date-picker>-->

????????????<el-date-picker

??????????????v-model="dateTime"

??????????????type="datetimerange"

??????????????:picker-options="pickerOptions"

??????????????@change="getDateTime"

??????????????value-format="yyyy-MM-dd?HH:mm:ss"

??????????????range-separator="至"

??????????????start-placeholder="開(kāi)始日期"

??????????????end-placeholder="結(jié)束日期"

??????????????align="right"

????????????></el-date-picker>

??????????</el-col>

??????????<!--?重置查詢按鈕?-->

??????????<el-col?:span="3"?:xs="24"?class="_search-box">

????????????<div?style="width:?100%;text-align:?right;">

??????????????<el-button?icon="el-icon-refresh-left"?@click="reset">重置</el-button>

??????????????<el-button?type="primary"?icon="el-icon-search"?@click="query">查詢</el-button>

????????????</div>

??????????</el-col>

????????</el-row>

??????</div>

????</el-card>

????<!--?form?-->

????<div?style="margin-bottom:?15px;">

??????<el-table?:data="tableData"?ref="multipleTable"?stripe>

????????<el-table-column?type="selection"?width="55"></el-table-column>

????????<el-table-column?prop="roomName"?label="教室名稱"></el-table-column>

????????<el-table-column?prop="buildingName"?label="教學(xué)樓名稱"></el-table-column>

????????<el-table-column?prop="floor"?label="樓層"></el-table-column>

????????<el-table-column?fixed="right"?label="操作"?width="100">

??????????<template?slot-scope="scope">

????????????<el-button?@click="handleClick(scope.row)"?type="text"?size="small">預(yù)約</el-button>

??????????</template>

????????</el-table-column>

??????</el-table>

????</div>

????<!--?日歷?-->

????<!--?<el-calendar?v-model="value">

??????<template?slot="dateCell"?slot-scope="{?date,?data?}">

????????<div?@click="changeTime(date,?data)">

??????????<p>

????????????{{?data.day.split('-').slice(1).join('-')?}}?{{?data.isSelected???'??'?:?''?}}

????????????<el-button

??????????????type="text"

??????????????@click.stop="dialogFormVisible?=?true"

??????????????@click="changeTime(date,?data)"

????????????>添加預(yù)約</el-button>

??????????</p>

??????????<div>

????????????<p?v-html="dealMyDate(data.day)"></p>

????????????<br?/>

??????????</div>

????????</div>

??????</template>

????</el-calendar>-->

????<!--?<el-calendar?v-model="timeValue"?id="calendar">

??????<template?slot="dateCell"?slot-scope="{?date,?data?}">

????????<div?@click="changeTime(date,?data)">

??????????<div?class="calendar-day">{{?data.day.split('-').slice(2).join('-')?}}</div>

??????????<div?v-for="(item,?index)?in?list"?:key="index">

????????????<div?v-if="item.months.indexOf(data.day.split('-').slice(1)[0])?!=?-1">

??????????????222

??????????????<div?v-if="item.days.indexOf(data.day.split('-').slice(2).join('-'))?!=?-1">

????????????????<div?class="is-selected">{{?item.content?}}111</div>

??????????????</div>

??????????????<div?v-else></div>

????????????</div>

????????????<div?v-else></div>

??????????</div>

????????</div>

??????</template>

????</el-calendar>-->

????<!--?彈出場(chǎng)館預(yù)約模態(tài)框?-->

????<!--?<el-dialog?title="添加預(yù)約信息"?:visible.sync="dialogFormVisible">

??????<el-form?:model="form">

????????<el-form-item?label="日期"?:label-width="formLabelWidth">

??????????<el-input?v-model="form.data"?autocomplete="off"?placeholder="2020-06-30"></el-input>

????????</el-form-item>

????????<el-form-item?label="開(kāi)始時(shí)間"?:label-width="formLabelWidth">

??????????<el-input?v-model="form.content.startTime"?autocomplete="off"?placeholder="09:00">></el-input>

????????</el-form-item>

????????<el-form-item?label="結(jié)束時(shí)間"?:label-width="formLabelWidth">

??????????<el-input?v-model="form.content.endTime"?autocomplete="off"?placeholder="17:00">></el-input>

????????</el-form-item>

????????<el-form-item?label="場(chǎng)地類型"?:label-width="formLabelWidth">

??????????<el-input?v-model="form.content.type"?autocomplete="off"?placeholder="教室">></el-input>

????????</el-form-item>

????????<el-form-item?label="預(yù)約場(chǎng)地"?:label-width="formLabelWidth">

??????????<el-input?v-model="form.content.address"?autocomplete="off"?placeholder="場(chǎng)館">></el-input>

????????</el-form-item>

??????</el-form>

??????<div?slot="footer"?class="dialog-footer">

????????<el-button?@click="dialogFormVisible?=?false">取?消</el-button>

????????<el-button?type="primary"?@click="input">確?定</el-button>

??????</div>

????</el-dialog>-->

??</div>

</template>

<script>

import?{?viewAvailableVenues,?getType?}?from?'@/APIs/index/index'

export?default?{

??name:?'viewAvailableVenues',

??data()?{

????return?{

??????typeList:?[

????????{

??????????value:?'am_room_type',

??????????label:?'教室'

????????},

????????{

??????????value:?'am_venue_type',

??????????label:?'運(yùn)動(dòng)場(chǎng)'

????????}

??????],

??????dictTypeList:?[],

??????typeName:?[],

??????list:?[],

??????page:?{

????????currentPage:?1,

????????pageSize:?10,

????????total:?0

??????},

??????venuesDetailsList:?[],

??????tableData:?[],

??????switchValue:?true,

??????dictTypeValue:?null,

??????dateValue:?'',

??????inputValue:?'',

??????inputValue1:?'',

??????pickerOptions:?{

????????disabledDate(time)?{

??????????return?time.getTime()?<?Date.now()

????????},

????????shortcuts:?[

??????????{

????????????text:?'今天',

????????????onClick(picker)?{

??????????????picker.$emit('pick',?new?Date())

????????????}

??????????},

??????????{

????????????text:?'昨天',

????????????onClick(picker)?{

??????????????const?date?=?new?Date()

??????????????date.setTime(date.getTime()?-?3600?*?1000?*?24)

??????????????picker.$emit('pick',?date)

????????????}

??????????},

??????????{

????????????text:?'一周前',

????????????onClick(picker)?{

??????????????const?date?=?new?Date()

??????????????date.setTime(date.getTime()?-?3600?*?1000?*?24?*?7)

??????????????picker.$emit('pick',?date)

????????????}

??????????}

????????]

??????},

??????dialogFormVisible:?false,

??????value:?new?Date(),

??????//?formLabelWidth:?'120px',

??????//?form:?{

??????//??content:?[

??????//????{

??????//??????appSiteType:?'',

??????//??????appSiteName:?'',

??????//??????appStartTime:?'',

??????//??????appEndTime:?''

??????//????}

??????//??]

??????//?},

??????//?resDate:?[

??????//??{

??????//????date:?'2020-09-20',

??????//????content:?[

??????//??????{

??????//????????appSiteType:?'運(yùn)動(dòng)場(chǎng)',

??????//????????appSiteName:?'場(chǎng)館A',

??????//????????appStartTime:?'13:00',

??????//????????appEndTime:?'14:00'

??????//??????}

??????//????]

??????//??}

??????//?]

??????dateTime:?[new?Date(2020,?8,?20,?8),?new?Date(2020,?8,?20,?9)]

????}

??},

??created()?{

????//?this.$nextTick(()?=>?{

????//??//?點(diǎn)擊前一個(gè)月

????//??let?prevBtn?=?document.querySelector(

????//????'.el-calendar__button-group?.el-button-group>button:nth-child(1)'

????//??)

????//??prevBtn.addEventListener('click',?e?=>?{

????//????let?d?=?new?Date(this.timeValue)

????//????let?resDate?=?d.getFullYear()?+?'-'?+?this.handleTime(d.getMonth()?+?1)?//2020-08

????//??})

????//??//點(diǎn)擊下一個(gè)月

????//??let?nextBtn?=?document.querySelector(

????//????'.el-calendar__button-group?.el-button-group>button:nth-child(3)'

????//??)

????//??nextBtn.addEventListener('click',?e?=>?{

????//????let?d?=?new?Date(this.timeValue)

????//????let?resDate?=?d.getFullYear()?+?'-'?+?this.handleTime(d.getMonth()?+?1)?//2020-10

????//??})

????//??//點(diǎn)擊今天

????//??let?todayBtn?=?document.querySelector(

????//????'.el-calendar__button-group?.el-button-group>button:nth-child(2)'

????//??)

????//??todayBtn.addEventListener('click',?e?=>?{

????//????let?d?=?new?Date(this.timeValue)

????//????let?resDate?=?d.getFullYear()?+?'-'?+?this.handleTime(d.getMonth()?+?1)?//2020-09

????//??})

????//?})

??},

??mounted()?{

????//?this.roomType()

??},

??methods:?{

????//?請(qǐng)求教室類型

????async?roomType(v)?{

??????const?dictType?=?v

??????const?data?=?await?getType({

????????dictType

??????})

??????//?eslint-disable-next-line?no-unused-vars

??????const?dictTypeList?=?{}

??????for?(let?i?=?0;?i?<?data.data.length;?i++)?{

????????this.dictTypeList.push({

??????????name:?data.data[i].dictLabel,

??????????value:?data.data[i].dictValue

????????})

??????}

??????this.roomValue(v)

????},

????//?請(qǐng)求教室名稱

????roomValue(v)?{

??????const?value?=?v

??????console.log(value);

????},

????//?查詢

????async?query()?{

??????//?console.log('查詢')

??????this.roomType()

??????const?type?=?this.typeName

??????const?siteType?=?this.dictTypeValue

??????const?startTime?=?this.dateTime[0]

??????const?endTime?=?this.dateTime[1]

??????const?{?currentPage:?pageNum,?pageSize?}?=?this.page

??????const?{

????????data:?{?list?=?[],?total?}

??????}?=?await?viewAvailableVenues({

????????type,

????????siteType,

????????startTime,

????????endTime,

????????pageNum,

????????pageSize

??????})

??????this.tableData?=?list.map(item?=>?({?...item,?visible:?false?}))

??????//?setStore('viewAvailableVenues',?JSON.stringify(list))

??????this.venuesDetailsList?=?list

??????this.page.total?=?total

??????console.log(this.tableData);

??????console.log(list,?total)

??????console.log(type,?siteType,?startTime,?endTime)

????},

????//?重置

????reset()?{

??????console.log('重置')

??????this.typeName?=?[]

??????this.value?=?new?Date()

??????this.value3?=?[new?Date(2016,?9,?10,?8),?new?Date(2016,?9,?10,?9)]

????},

????//?得到日期和時(shí)間

????getDateTime()?{

??????var?dateTime?=?this.dateTime

??????console.log(dateTime)

????}

????//?獲取數(shù)據(jù)

????//?async?postVenueDetailsListData()?{},

????//?渲染預(yù)約信息

????//?dealMyDate(v)?{

????//??//?console.log(this.date)

????//??let?len?=?this.resDate.length

????//??let?res?=?''

????//??for?(let?i?=?0;?i?<?len;?i++)?{

????//????let?len1?=?this.resDate[i].content.length

????//????for?(let?j?=?0;?j?<?len1;?j++)?{

????//??????if?(this.resDate[i].date?==?v)?{

????//????????//?console.log(len1);

????//????????res?=?`${this.resDate[i].content[j].appStartTime}-${this.resDate[i].content[j].appEndTime}<br>

????//????????${this.resDate[i].content[j].appSiteType}-${this.resDate[i].content[j].appSiteName}`

????//??????}

????//????}

????//??}

????//??return?res

????//?},

????//?點(diǎn)擊天數(shù)

????//?changeTime(date,?data)?{

????//??console.log(date,?1111,?data,?2222)

????//??this.form.date?=?data.day

????//??console.log(this.form)

????//?},

????//?添加內(nèi)容

????//?input()?{

????//??this.dialogFormVisible?=?false

????//??let?content?=?this.form

????//??console.log(content)

????//??this.resDate.push(content)

????//??console.log(this.resDate)

????//?},

????//?//?處理時(shí)間

????//?handleTime(s)?{

????//??return?s?<?10???'0'?+?s?:?s

????//?},

????//?//?點(diǎn)擊彈出輸入框

????//?open()?{

????//??this.$prompt('請(qǐng)輸入',?'提示',?{

????//????confirmButtonText:?'確定',

????//????cancelButtonText:?'取消'

????//??})

????//????.then(({?value?})?=>?{

????//??????this.$message({

????//????????type:?'success',

????//????????message:?'添加成功'

????//??????})

????//????})

????//????.catch(()?=>?{

????//??????this.$message({

????//????????type:?'info',

????//????????message:?'取消輸入'

????//??????})

????//????})

????//?}

??}

}

</script>

<style>

.div-Calendar?{

??width:?100%;

??height:?100%;

??box-sizing:?border-box;

}

.calendar-day?{

??text-align:?center;

??color:?#202535;

??line-height:?30px;

??font-size:?12px;

}

.is-selected?{

??color:?#f8a535;

??font-size:?10px;

??margin-top:?5px;

}

#calendar?.el-button-group?>?.el-button:not(:first-child):not(:last-child):after?{

??content:?'當(dāng)月';

}

</style>

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末戈咳，一起剝皮案震驚了整個(gè)濱河市心软，隨后出現(xiàn)的幾起案子壕吹，更是在濱河造成了極大的恐慌，老刑警劉巖糯累，帶你破解...
    沈念sama閱讀 221,273評(píng)論 6贊 515
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件算利，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡泳姐，警方通過(guò)查閱死者的電腦和手機(jī)效拭，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評(píng)論 3贊 398
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門(mén)，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)胖秒，“玉大人缎患，你說(shuō)我怎么就攤上這事⊙指危” “怎么了挤渔？”我有些...
    開(kāi)封第一講書(shū)人閱讀 167,709評(píng)論 0贊 360
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)风题。 經(jīng)常有香客問(wèn)我判导，道長(zhǎng)，這世上最難降的妖魔是什么沛硅？ 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,520評(píng)論 1贊 296
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任眼刃，我火速辦了婚禮，結(jié)果婚禮上摇肌，老公的妹妹穿的比我還像新娘擂红。我一直安慰自己，他們只是感情好围小，可當(dāng)我...
    茶點(diǎn)故事閱讀 68,515評(píng)論 6贊 397
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布昵骤。 她就那樣靜靜地躺著，像睡著了一般肯适。 火紅的嫁衣襯著肌膚如雪变秦。 梳的紋絲不亂的頭發(fā)上，一...
    開(kāi)封第一講書(shū)人閱讀 52,158評(píng)論 1贊 308
  • 城市分裂傳說(shuō)
    那天疹娶，我揣著相機(jī)與錄音伴栓，去河邊找鬼。 笑死雨饺，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的额港。 我是一名探鬼主播饺窿，決...
    沈念sama閱讀 40,755評(píng)論 3贊 421
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼移斩！你這毒婦竟也來(lái)了肚医？” 一聲冷哼從身側(cè)響起绢馍，我...
    開(kāi)封第一講書(shū)人閱讀 39,660評(píng)論 0贊 276
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎肠套，沒(méi)想到半個(gè)月后舰涌，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 46,203評(píng)論 1贊 319
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡你稚，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,287評(píng)論 3贊 340
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年瓷耙，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片刁赖。...
    茶點(diǎn)故事閱讀 40,427評(píng)論 1贊 352
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡搁痛，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出宇弛，到底是詐尸還是另有隱情鸡典，我是刑警寧澤，帶...
    沈念sama閱讀 36,122評(píng)論 5贊 349
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布枪芒，位于F島的核電站彻况，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏舅踪。R本人自食惡果不足惜疗垛，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,801評(píng)論 3贊 333
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望硫朦。 院中可真熱鬧，春花似錦背镇、人聲如沸咬展。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,272評(píng)論 0贊 23
  • 一樁弒父案瞒斩，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)破婆。三九已至，卻和暖如春胸囱，著一層夾襖步出監(jiān)牢的瞬間祷舀，已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,393評(píng)論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工烹笔， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留裳扯，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,808評(píng)論 3贊 376
  • 代替公主和親
    正文 我出身青樓谤职，卻偏偏與公主長(zhǎng)得像饰豺，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子允蜈，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,440評(píng)論 2贊 359