vue中使用element DateTimePicker，数据绑定不上

逃离我推掉我的手 2024-04-17 17:07 20阅读 0赞

# vue中使用element DateTimePicker，数据绑定不上 #

## 说明 ##

1、DateTimePicker虽然有快捷选日期的功能，有时候需要自定义按钮就需要代码去修改属性  
2、群里的小伙伴在ie系列浏览器遇到一个鬼畜问题，就是数据更新了，DateTimePicker并没有渲染，DateTimePicker通过v-model绑定了数据，在设置函数里修改了数据，然而DateTimePicker里还是空的

![format_png][]

DateTimePicker 数据没更新

2、解决办法，刷新组件，通过v-if来创建新的组件

![format_png 1][]

通过v-if刷新组件 图1

![format_png 2][]

通过v-if刷新组件 图2

3、实现效果入下图

![format_png 3][]

实现效果

## HelloWorld.vue ##

有兴趣的小伙伴可以来试试ie的鬼畜呦，[vue-cli][]\+[babel][]，完整代码附上

<template>
      <div class="timer">
        <el-date-picker type="datetime" placeholder="请选择开始时间" v-model="reportStartTime" v-if="hackReset">
        </el-date-picker>
        <span>-</span>
        <el-date-picker type="datetime" placeholder="请选择结束时间" v-model="reportEndTime"   v-if="hackReset">
        </el-date-picker>
        <ul class="timeList">
          <li :class="{active:isActive===index}" @click="chooseTime(index)" v-for="(item,index) in dataArr" :key="index">{
       {item}}</li>
        </ul>
        <hr/>
        <div>最新数据：{
       {reportStartTime}}----{
       {reportEndTime}}</div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          isActive: '',
          dataArr: ['今天', '一个月', '三个月', '一年'],
          reportStartTime: null, // 申报开始时间
          reportEndTime: null, // 申报结束时间
          hackReset: true
        }
      },
      watch: {
        reportEndTime (val) {
          console.log(11, val)
        }
      },
      methods: {
        chooseTime (index) {
          this.isActive = index
          let num = ''
          if (index === 0) {
            num = 0
          } else if (index === 1) {
            num = 30
          } else if (index === 2) {
            num = 90
          } else if (index === 3) {
            num = 365
          } else {
            return
          }
          let getTime = new Date().getTime()
          this.reportStartTime = new Date(getTime - (+1000 * 60 * 60 * 24 * (num)) - ((new Date().getHours() * 60 * 60 + new Date().getMinutes() * 60 + new Date().getSeconds()) * 1000))
          if (index === 0) {
            this.reportStartTime = new Date(getTime - ((new Date().getHours() * 60 * 60 + new Date().getMinutes() * 60 + new Date().getSeconds()) * 1000))
          }
          this.reportEndTime = new Date() // 修改数据
          this.hackReset = false
          this.$nextTick(() => {
            this.hackReset = true
          })
        }
      }
    }
    </script>
    
    
    <style scoped>
      h1,
      h2 {
        font-weight: normal;
      }
      ul {
        list-style-type: none;
        padding: 0;
      }
      li {
        display: inline-block;
        margin: 0 10px;
      }
      a {
        color: #42b983;
      }
      .timeList {
        margin-left: 20px;
      }
      li {
        width: 60px;
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
        margin-right: 30px;
        background-color: #fff;
        text-align: center;
      }
      li:hover {
        cursor: pointer;
      }
      .active {
        color: #fff;
        background-color: #ef462f;
      }
      .timer{
        align-items: center;
        justify-content: center;
    
      }
      span{
        margin: 0 10px;
      }
    </style>

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82NTIzNzA1LTkwNGQxMTZlNjAzZDRmNTEucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy83OTgvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82NTIzNzA1LTg3NzRiMDQ2ZjBhMGE0MGQucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMDAwL2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82NTIzNzA1LWRkYzhiNTY3ODVlMjMwYzgucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy81MDIvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82NTIzNzA1LWQ2OGRiODNmNWU1NDlmMTMucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy83MjMvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[vue-cli]: http://www.runoob.com/vue2/vue-install.html
[babel]: https://blog.csdn.net/bright2017/article/details/77850525