代码:
<un-button @click="changeDate">改变时间</un-button>
<el-date-picker
v-model="value"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd"
>
</el-date-picker>
data(){
return {
value:""
}
}
methods: {
changeDate() {
this.value = '2020-11-11';
}
}
问题:
在 ie浏览器上, 当点击“改变时间”按钮给日期组件赋值时,页面没有变化,但是当点击日期控件弹出日期选择窗时,发现时间是改变过的。
解决:
经过排查发现如果把 placeholder
属性去掉则可以正常赋值显示,并且出现这个bug是element-ui的老版本,最新版本没有问题。
如果想要显示 placeholder
,并且正常赋值,可以这么写:
在组件上加上ref="myDate"
属性,在改变时间之前写上this.$refs.myDate.userInput = null
即可。
<el-date-picker
v-model="value"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd"
ref="myDate"
>
</el-date-picker>
methods: {
changeDate() {
this.$refs.myDate.userInput = null;
this.value = '2020-11-11';
}
}