笔记：更新元素达到解决element-ui 日期选择器在未选择日期时重复点击打开只触发一次disabledDate的问题

element-ui日期选择器提供disabledDate属性达到设置日期禁选的效果

使用场景：用户在多选框选中服务后需要对服务的冲突时段进行验证和提示，部分效果体现在展开日期选择器时对冲突的日期禁用。

这里使用element-ui的DatePicker 日期选择器，并通过disabledDate属性达到禁用效果

然而DatePicker 日期选择器存在一个情况，当选择时间为空时，disabledDate属性只在第一次点击时触发，重复点击不在更新禁用效果。

未选择日期的情况下，当用户选择一个服务展开日期选择器，对当前服务冲突日期禁用，用户切换到另一个服务后再次点击日期选择器展开后依旧显示上一次的禁用效果。

解决方案

vue中存在一个key属性，频繁使用在v-for循环中。然而它还能达到更新元素的效果，当元素设置的key值发生变化时，vue会认为这里发生了变化从而生成一个新的元素，之前的key变化后就不存在了，所以旧有的元素就被删除了，从而达到更新元素的效果。

例如：

v-model="lesseeTime"

type="daterange"

:key="pickerKey"

:picker-options="pickerOptions"

@blur="pickerBlur">

通过picker-options中设置disabledDate达到禁用

computed: {

pickerOptions(){

let day = new Date(moment().format('YYYY/MM/DD'))

return {

disabledDate(time){

if(time < day){ //已过的日期禁用

return true

}

return false

}

}

}

},

然后在元素失去焦点时更新key达到更新元素的效果

pickerBlur(){

this.pickerKey= new Date().getTime()

},