element UI日期选择器动态切换了type之后布局错乱

使用element UI 的日期插件的时候,经常会搭配状态的切换,比如从日选择,切换到月选择,此时如果用一个日期插件来动态切换它的type值,则会出现一个bug:在点击日期插件,但是不选中日期,直接再点切换type的按钮,则再次打开日期面板的时候,面板会直接插入日期控件的下方,导致页面层级不正确,页面布局错乱。如下图:

正确图如下:

错乱样式如下:

 遇到这种情况,大部分人都选择写两个日期插件,然后通过v-show来切换(用v-if都还是会有这样的问题)。

但是如果不想写那么多,绑定两个参数,解决办法就是直接给这个日期控件加上一个key,切换日期控件的type的时候,也动态的设置key,这样日期插件会重新渲染,就不会出现上面界面的错乱了。

原文地址:https://www.cnblogs.com/liuqin-always/p/13704574.html