vue el-date-picker 不被div遮挡

在Vue中使用`el-date-picker`组件时，如果你遇到它被其他元素遮挡的情况，通常是因为它们在Z-index堆叠顺序上存在问题。`el-date-picker`默认不会自动调整其位置以避免遮挡，但它会响应鼠标点击事件穿透到下面的内容。

要解决这个问题，你可以尝试以下几种方法：

1. **手动调整样式**：通过CSS给`el-date-picker`设置固定的Z-index值，并确保它的`position`不是`static`，比如`relative`或`absolute`，使其层叠在其他元素之上。

.el-date-picker {
  z-index: 999; /* 高于其他元素的z-index */
  position: relative;
}

2. **父容器处理**：将日期选择器放入一个独立的`<div>`中，这个`div`拥有更高的Z-index，可以覆盖其他内容。

<div class="picker-container">
  <el-date-picker></el-date-picker>
</div>

.picker-container {
  position: relative;
  z-index: 1000; /* 或者你需要的数值 */
}

3. **JavaScript干预**：如果上述方法不行，也可以考虑在需要显示日期选择器的时候动态调整其样式，例如使用`v-show`或`v-if`。

<button @click="showDatePicker = true">选择日期</button>
<template v-if="showDatePicker">
  <el-date-picker></el-date-picker>
</template>

data() {
  return {
    showDatePicker: false,
  };
},
methods: {
  // 其他方法...
  setShow DatePicker(value) {
    this.showDatePicker = value;
  },
}