解决Element-UI日期时间选择器弹出位置错位

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

在使用Element-UI中的日期时间选择器时，可能会遇到弹窗位置错位的问题。这个问题通常发生在有多个日期时间选择器并且它们之间进行频繁切换的情况下。

问题原因

错位的原因在于Vue的虚拟DOM更新机制。当页面中有多个相同的组件时，Vue为了提高性能，可能会对这些组件进行DOM节点的复用。在这种情况下，如果组件的状态发生变化，而Vue没有足够的信息来区分不同的实例，就会出现位置错位的现象。

解决方案

为了解决这个问题，可以在每个日期时间选择器组件上添加一个唯一的key属性。这样Vue就可以正确地识别每一个组件实例，从而避免DOM节点的错误复用。

:key="picker_key01"

示例代码

<template>
  <div>
    <el-form-item label="日期" v-if="val1">
      <el-date-picker
        :key="pickerKey1"
        size="small"
        v-model="value1"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm"
        placeholder="选择日期"
      />
    </el-form-item>
    <el-form-item label="日期范围" v-if="val2">
      <el-date-picker
        :key="pickerKey2"
        v-model="value2"
        size="small"
        style="width: 240px"
        value-format="yyyy-MM-dd"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
    </el-form-item>
  </div>
</template>

<script>
export default {
  data() {
    return {
      val1: true,
      val2: false,
      value1: '',
      value2: '',
      pickerKey1: 'picker_key_1', // 或 Date.now()
      pickerKey2: 'picker_key_2', // 或 Date.now()
    };
  },
};
</script>

多个时间选择器存在时，会出现弹出位置错位；给组件添加一个唯一的key属性可以解决这一问题，原因在于Vue的渲染机制

总之，通过为每个时间选择器组件添加一个唯一的key，可以有效地帮助Vue追踪组件的状态和位置，避免由于DOM复用导致的下拉菜单错位等问题。

注意事项

1. 唯一性：确保为每个组件分配的key值是唯一的。
2. 动态绑定：使用:key语法糖来动态绑定key值。
3. 避免不必要的更新：如果组件的状态不改变，则无需更新key值，否则会导致不必要的组件重新渲染。

通过以上步骤，你可以有效避免日期时间选择器的弹出窗口位置错位问题。