ElementUI - datePicker 范围回显不生效

1.场景

在使用ElementUI组件库中datePicker组件库时，需要在datePicker组件中回显后端传递过来的日期数据，但是发现当数据赋值给组件对应绑定的值之后，再次手动选择日期，发现选择日期失效，同时change事件也不会触发
原因是Vue无法捕获到普通的新增数据，也就是说赋值给datePicker组件的数据，其组件内部获取到的数据并是不响应式的。

2. 解决

此时只需要使用this.$set(target,key,value) 给组件对应绑定的值设置后端传递过来的值即可。

<el-date-picker v-model="form.reserveConstrTime" type="daterange" clearable value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateChange" />

// 此赋值方法无效： 
this.form.reserveConstrTime = ['2024-10-16','2024-10-30']

// 使用$set赋值：
this.$set(this.form,'reserveConstrTime',['2024-10-16','2024-10-30']) 
// 此时即时赋值了后端传递过来的数据之后，再次手动选择日期仍然会生效，change事件也会触发。