【element-ui】el-select下拉框el-date-picker弹出框定位问题解决方案

问题描述:

项目开发过程中发现el-select和el-date-picker弹出框显示时候,滚动屏幕,导致弹出框定位出现问题。

首先考虑到看一下element-ui官网提供的api,如下图

1、select提供了popper-append-to-body属性的配置

代码如下:

复制代码
<el-select v-model="value" placeholder="请选择" :popper-append-to-body="false">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

2、el-date-picker提供了append-to-body属性的配置

代码如下:

复制代码
<el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期"
      :append-to-body="false"
>
</el-date-picker>

有时候popper-append-to-body和append-to-body设置成false不生效,此时需要找到el-select对应的父节点设置样式:overflow:inherit !important

相关推荐
码路飞12 分钟前
玩了一圈 AI 编程工具,Background Agent 才是让我真正震撼的东西
前端·javascript
林恒smileZAZ21 分钟前
Three.js实现更真实的3D地球[特殊字符]动态昼夜交替
开发语言·javascript·3d
月月大王的3D日记23 分钟前
别再复制粘贴了,从零拆解 3D 场景的诞生过程
javascript
昭昭日月明1 小时前
前端仔速通 Python
javascript·python
SailingCoder1 小时前
Electron 安全IPC核心:contextBridge 安全机制
javascript·安全·electron
WebInfra1 小时前
Rsbuild 2.0 发布:即将支持 TanStack Start
前端·javascript·程序员
掘金安东尼1 小时前
OpenMUSE 全面详解:非扩散Transformer文生图开源基座(对标GPT Image 2)
前端·javascript·面试
_白_2 小时前
从 0 到上线:我如何用开源打造一款密码管理 Chrome 插件
javascript
Cdlblbq3 小时前
搜索会员中心 创作中心Vue2项目一键打包成桌面应用
前端·javascript·vue.js·electron
A_nanda4 小时前
vue实现后端传输逐帧图像数据
前端·javascript·vue.js