原始代码
<el-form-item label="征集时间" prop="dateRange">
<el-date-picker
v-model="baseForm.dateRange"
type="daterange"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
由于后台返回的数据是两个 yyyy-MM-dd 格式的日期字符串(startDate, endDate),因此一开始采用如下写法来回显
getDetail() {
getActivityDetail({activityId: this.activityId}).then(res => {
let { data } = res.data
this.baseForm = JSON.parse(JSON.stringify(data)) || {}
this.baseForm.dateRange = [data.startDate, date.endDate]
}
}
问题描述
上述写法日期回显了但是修改日期的时候不会回显
解决方法
在 input 方法中可知,修改时,el-date-picker 所绑定的 v-model 的值已经改变,但是控件中没有实时更新,最终采用 this.$set 方法进行数据的更新,并成功解决此问题
getDetail() {
getActivityDetail({activityId: this.activityId}).then(res => {
let { data } = res.data
this.baseForm = JSON.parse(JSON.stringify(data)) || {}
this.$set(this.baseForm, 'dateRange', [data.startDate, date.endDate])
}
}