el-date-picker时间选择器修改时间无效

el-date-picker时间选择器修改时间无效

前言

最近项目当中需要编辑时间的需求,同事小姐姐在修改的时候发现值已经改变,但是页面并没有更新,问了我,我也是第一次遇见这个问题

  <el-date-picker
      v-model="value1"
      type="monthrange"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd">
    </el-date-picker>

经过我一番百度,知道了原因:因为数据层次太多,render函数没有自动更新,需手动强制刷新
那就找找时间选择器的事件吧
el-date-picker时间选择器修改时间无效_第1张图片
在这里要注意@change可能不会触发,那又该咋办呢?
@blur替代@change

  <el-date-picker
      v-model="data.value1"
      type="monthrange"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      @blur="changeDate">
    </el-date-picker>

	changeDate(val) {
		this.$forceUpdate();
		this.data.value1 = val;
	}

这样就好啦~

But

同事小姐姐说她知道问题在哪了……
因为是列表传值到dialog中,原来是直接传value1,在dialog接收
现在改成直接把那一行所有数据data都传过来,让它自己匹配

两种办法,大家自己试试哪种可行吧~~~

今天也是努力搬砖的小花吖~
就酱!啾咪~

你可能感兴趣的:(vue+elementui,vue.js,elementui)