iview踩坑记录

datePicker组件在datetimerange模式中需要自定义修改value值

点击的最后一个值需要是xxxx年xx月xx日23时59分59秒

部分代码如下：

 template中代码
<DatePicker
     v-model="searchData.date"
     type="datetimerange"
     format="yyyy-MM-dd HH:mm:ss"
     placeholder="请选择开始时间和结束时间"
     style="width: 300px"
     :options="optionDate"
     @on-change="dateChange"
>

methods中代码
dateChange(val, type) {
  if (type === 'date') {
    this.searchData.date[1] = new Date(this.searchData.date[1].getTime() + 24 * 60 * 60 * 1000 - 1000)
  }
}

这么写后发现值并未改变，查iview源码

/node_modules/iview/src/components/date-pick/picker.vue

在其中的watch可以看到

源码中并非深度监视，所以如果是数组的话需要全量更新。因此在改成：

dateChange(val, type) {
  if (type === 'date') {
     this.searchData.date = [
        this.searchData.date[0],
        new Date(this.searchData.date[1].getTime() + 24 * 60 * 60 * 1000 - 1000)
      ];
  }
},

便可以正确的显示了