【element-ui】el-date-picker 组件 type=“monthrange“ 选择时间段操作异常

element-ui的 el-date-picker组件在选择月份区间时发了这么一个bug。在选择起始月份后关闭了选择面板,再次打开后上次选择的值还存在
在这里插入图片描述

但是看了所有的属性和方法都没有发现可以清除上次选择的值,也在网上各种搜索没找到解决办法,经过各种办法处理后得到了最简单处理方式,就是利用 key 值的变化重新渲染组件

<el-date-picker
  :key="monthrangeKey"
  v-if="formJson.formValue.ReportType === 2"
  v-model="formJson.formValue.CallDate"
  type="monthrange"
  :clearable="false"
  value-format="yyyy-MM"
  :picker-options="pickerMonthOptions"
  @blur="blurmonthrange"
></el-date-picker>

data(){
  return {
    monthrangeKey:""
  }
}

blurmonthrange() {
  this.monthrangeKey = Math.random();
},

最终处理之后的选择效果,达到了预期的选择时间操作
在这里插入图片描述

key的值可以是number,也可以是string。
key主要作用于Vue的virtual DOM算法,在diff new nodes list和old nodes list时,作为识别VNode的一个线索。
如果不用key,Vue会用一种算法:最小化element的移动,并且会尝试尽最大程度在同适当的地方对相同类型的element,做patch或者reuse。
如果使用了key,Vue会根据keys的顺序记录element,曾经拥有了key的element如果不再出现的话,会被直接remove或者destoryed。
拥有同一个parent的children必须有unique keys。重复的key的导致render error。

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值