vue el-date-picker 日期回显后无法改变问题解决
作者：阿wei程序媛
这篇文章主要介绍了vue el-date-picker 日期回显后无法改变问题解决,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
场景描述：点击修改，数据回显渲染，后端返回我的是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 日期回显内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！