在用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

Logo

前往低代码交流专区

更多推荐