Element：el-date-picker切换时间选择面板，样式错乱的问题。。

组件描述：

• 自己封装了一个可以切换日、周、月日期选择框的组件。
  

问题演示

• 首先打开日期选择面板
  

• 在该选择面板还没关闭的情况下，切换左侧的日期类型按钮。例如：切换到周的类型。
  

• 这个时候再打开右侧的日期选择面板，会发现日期选择面板的样式错乱。
  

原因分析

• 在切换日期选择面板的过程中，当前的写法无法唯一标识各个日期选择面板，从而导致样式错乱。

解决方案

• 在组件内部加上key属性即可。例如：key=“day”
  

• 代码示例：

<el-date-picker v-if="dateType === 0" type="date" value-format="yyyy-MM-dd"
:picker-options="startDateDisabled1" key="day"
@change="initAll" v-model="queryDate" placeholder="选择天">
</el-date-picker>

<el-date-picker v-if="dateType === 1" type="week" format="yyyy 第 WW 周"
value-format="yyyy-MM-dd" @change="handleWeekChange"
key="week" :picker-options="startDateDisabled2"
v-model="queryDate" placeholder="选择周">
</el-date-picker>

<el-date-picker v-if="dateType === 2" type="month"
value-format="yyyy-MM-dd" @change="initAll"
key="month" :picker-options="startDateDisabled3"
v-model="queryDate" placeholder="选择月">
</el-date-picker>