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
更多推荐
已为社区贡献2条内容
所有评论(0)