elementui panel_vue踩坑02：elementUI中DatePicker面板的BUG

0、背景描述

在实际开发中，经常有这样的需求：

需要对一些数据进行查询，并且展示，查询的方式，可以是按月查询、按年查询、按日查询。

1、第一版实现

最简单的方式，我们可以这样实现（注释掉了某些其它查询条件）：

点击左边的tab，可以切换右边时间选择器的类型，按照正常的代码：

// 先放一组单选按钮
<el-radio-group v-model="pickerType">
    <el-radio-button label="date">日报</el-radio-button>
    <el-radio-button label="week">周报</el-radio-button>
    <el-radio-button label="month">月报</el-radio-button>
    <el-radio-button label="year">年报</el-radio-button>
</el-radio-group>
// 再放上日期选择器
<el-date-picker
    v-model="date"
    :type="pickerType"
></el-date-picker>

点击tab，改变了 pickerType 时，日期选择器会根据传入的type重新渲染好日期选择面板。

问题来了：如果打开了下拉面板，再切换日期选择器类型，再重新打开下拉面板，会出现一个样式错误：

2、第一次修复

通过元素查看，能知道，两次点击，打开的下拉面板不是一个元素，第二次点击出来的元素，没有使用定位，导致出现在了最底层，我们可以使用一种方式，就是添加绝对定位，然后设置z-index：