场景描述:点击修改,数据回显渲染,后端返回我的是startTime和endTime,我需要将其处理,放到一个数组里面,并将其赋值
后端返回数据
<el-form-item label="适用时间" prop="time1">
<el-date-picker
v-model="form.time1"
type="datetimerange"
style="width: 380px"
:default-time="['00:00:00', '23:59:59']"
range-separator="至"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="expireTimeOPtion"
@change="beginDateChange"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
var array=[]
getfuelRates(id).then(response => {
this.form = response.data;
array.push(response.data.startTime,response.data.endTime)
this.form.time1=array
this.open = true;
this.title = "修改";
});
},
这样写,就会出现问题,数据回显成功之后,无法改变,如下图
解决方法:
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
var array=[]
getfuelRates(id).then(response => {
this.form = response.data;
array.push(response.data.startTime,response.data.endTime)
this.$set(this.form,'time1',array);
this.form.time1=array
this.open = true;
this.title = "修改";
});
},
或者
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getfuelRates(id).then(response => {
this.form = response.data;
this.$set(this.form,'time1',[response.data.startTime,response.data.endTime]);
this.form.time1=array
this.open = true;
this.title = "修改燃油附加费";
});
},
重点代码:
this.$set(this.form,'time1',XXX);
以上就能实现,如下图