关于Element-UI：DateTimePicker组件 如何获取它的值

如图，在query我得不到type和dictType的值，一直为undefined未定义，其实只要将他们的值改为组件里v-model绑定的值即可



此时，数据成功返回给后端，接口连接通畅



附上接口：


这个页面代码留在附件里，有需求自取参考

<template>

  <div class="content">

    <!-- 查看可预约场馆 -->

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

      <div>

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

          <!-- 场馆类型 -->

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

            <div style="float: left;">

              <span class="span-size">场馆类型：</span>

            </div>

            <el-select v-model="typeName" placeholder="请选择" @change="roomType">

              <el-option

                v-for="item in typeList"

                :key="item.value"

                :label="item.label"

                :value="item.value"

              ></el-option>

            </el-select>

          </el-col>

          <!-- 场馆名称 -->

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

            <div style="float: left;">

              <span class="span-size">场馆名称：</span>

            </div>

            <el-select v-model="dictTypeValue" placeholder="请选择" @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="开始日期"

              end-placeholder="结束日期"

              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="教学楼名称"></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">预约</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)"

            >添加预约</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>-->

    <!-- 弹出场馆预约模态框 -->

    <!-- <el-dialog title="添加预约信息" :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="开始时间" :label-width="formLabelWidth">

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

        </el-form-item>

        <el-form-item label="结束时间" :label-width="formLabelWidth">

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

        </el-form-item>

        <el-form-item label="场地类型" :label-width="formLabelWidth">

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

        </el-form-item>

        <el-form-item label="预约场地" :label-width="formLabelWidth">

          <el-input v-model="form.content.address" autocomplete="off" placeholder="场馆">></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: '运动场'

        }

      ],

      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: '运动场',

      //        appSiteName: '场馆A',

      //        appStartTime: '13:00',

      //        appEndTime: '14:00'

      //      }

      //    ]

      //  }

      // ]

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

    }

  },

  created() {

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

    //  // 点击前一个月

    //  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

    //  })

    //  //点击下一个月

    //  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

    //  })

    //  //点击今天

    //  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: {

    // 请求教室类型

    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)

    },

    // 请求教室名称

    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)]

    },

    // 得到日期和时间

    getDateTime() {

      var dateTime = this.dateTime

      console.log(dateTime)

    }

    // 获取数据

    // async postVenueDetailsListData() {},

    // 渲染预约信息

    // 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

    // },

    // 点击天数

    // changeTime(date, data) {

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

    //  this.form.date = data.day

    //  console.log(this.form)

    // },

    // 添加内容

    // input() {

    //  this.dialogFormVisible = false

    //  let content = this.form

    //  console.log(content)

    //  this.resDate.push(content)

    //  console.log(this.resDate)

    // },

    // // 处理时间

    // handleTime(s) {

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

    // },

    // // 点击弹出输入框

    // open() {

    //  this.$prompt('请输入', '提示', {

    //    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: '当月';

}

</style>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,319评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,801评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,567评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,156评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,019评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,090评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,500评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,192评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,474评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,566评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,338评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,212评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,572评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,890评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,169评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,478评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,661评论 2赞 335