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)
];
}
},
便可以正确的显示了