vue.js中el-data-picker中type="daterange"修改日期的时候数据不回写的问题。
在用element-ui的框架中,使用el-data-picker的type="daterange"的方式修改日期时,当修改的时候,修改的日期不显示,但是提交到后台是正确的。原因是:结果发现得到的日期可以渲染在el-date-picker上,但是修改的时候不会回显经测试后发现,此时可以触发input方法,但不触发change方法在input方法中可知,修改时,el-date-picker所绑定..
·
在用element-ui的框架中,使用el-data-picker的type="daterange"的方式修改日期时,当修改的时候,修改的日期不显示,但是提交到后台是正确的。原因是:结果发现得到的日期可以渲染在el-date-picker上,但是修改的时候不会回显
经测试后发现,此时可以触发input方法,但不触发change方法
在input方法中可知,修改时,el-date-picker所绑定的v-model的值已经改变,但是控件中没有实时更新
最终选择采用this.$set方法进行数据的更新,并成功解决此问题
<el-date-picker v-model="formObj.formModel.deadTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" @input="testClick"></el-date-picker>
需要添加红色的方法:
testClick(e) {
this.$nextTick(() => {
this.$set(this.formObj.formModel, "deadTime", [e[0], e[1]]);
});
},
在修改方法里添加:
//编辑页面
handleEdit(index,row){
console.log(row.startTime+","+row.endTime);
/* row.push(this.formObj.formModel.deadTime)*/
this.formObj = {
title: '新建任务',
type:'2',//0,详情,1新增,2编辑
formVisible: true,
formModel: Object.assign({}, row),
};
// this.formObj.formModel.deadTime=[row.startTime,row.endTime];
this.$set( this.formObj.formModel, "deadTime", [
row.startTime,row.endTime
]);
},
参考地址:https://blog.csdn.net/qq_41926416/article/details/91806638
更多推荐



所有评论(0)