vue el-date-picker 日期回显后无法改变问题解决

场景描述:点击修改,数据回显渲染,后端返回我的是startTime和endTime,我需要将其处理,放到一个数组里面,并将其赋值

后端返回数据

vue el-date-picker 日期回显后无法改变问题解决

   <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 = "修改";
      });
    },

这样写,就会出现问题,数据回显成功之后,无法改变,如下图

vue el-date-picker 日期回显后无法改变问题解决

解决方法:

  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 日期回显后无法改变问题解决

(0)
上一篇 2023-04-11 15:49
下一篇 2023-04-11 15:51

相关推荐