解决：element-ui 日期控件在 ie 浏览器上赋值无法正常显示

最新推荐文章于 2023-10-31 15:55:35 发布

原创最新推荐文章于 2023-10-31 15:55:35 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

56 篇文章

订阅专栏

博客讲述了在IE浏览器中使用Element-UI老版本时，日期选择器组件在通过按钮点击赋值不显示的问题。问题出现在placeholder属性上，移除该属性可以临时解决。但为了保留placeholder并正确赋值，解决方案是在赋值前设置this.$refs.myDate.userInput为null。此问题在Element-UI新版本中已修复。

代码：

<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';
	}
}