element 日期选择器弹出框位置错位

日期时间选择器 弹出位置错位

原因：多个时间选择器存在时，会出现弹出位置错位；给组件添加一个唯一的key属性可以解决这一问题，原因在于Vue（或其它前端框架）的渲染机制，可以有效地帮助vue追踪组件的状态和位置，避免由于DOM复用导致的下拉菜单错位等问题。

<!-- 日期 -->
<el-form-item v-if="queryParams.selectTime != '1'">
    <el-date-picker
        key="!month" // 添加一个唯一的key属性
        class="w-all"
        v-model="channelDate"
        value-format="yyyy-MM-dd"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="handleQuery"
    ></el-date-picker>
</el-form-item>

<!-- 选择月 -->
<el-form-item v-if="queryParams.selectTime == '1'">
    <el-date-picker
       key="month" // 添加一个唯一的key属性
       v-model="queryParams.customMonth"
       type="month"
       value-format="yyyy-MM"
       placeholder="选择月"
       class="w-all"
       @change="handleQuery"
    ></el-date-picker>
</el-form-item>

https://blog.csdn.net/weixin_45511682/article/details/123728659