vue el-date-picker 日期回显后无法改变问题解决
短信预约 -IT技能 免费直播动态提醒
场景描述:点击修改,数据回显渲染,后端返回我的是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);
以上就能实现,如下图
到此这篇关于vue el-date-picker 日期回显后无法改变的文章就介绍到这了,更多相关vue el-date-picker 日期回显内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341