【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

相关推荐
希冀1239 小时前
【Vue】第五篇
前端·javascript·vue.js
www_stdio10 小时前
JavaScript 中的数组:开箱即用却暗藏玄机
javascript
华仔啊10 小时前
开源一款 SpringBoot3 + Vue3 数据库文档工具,自动生成 Markdown/HTML
vue.js·spring boot·后端
顾安r11 小时前
11.10 脚本算法 五子棋 「重要」
服务器·前端·javascript·游戏·flask
一枚前端小能手11 小时前
「周更第11期」实用JS库推荐:Pinia
前端·javascript·vue.js
kirinlau11 小时前
requst payload和query string parameters
前端·javascript
烟袅11 小时前
JavaScript 是如何“假装”多线程的?深入理解单线程与 Event Loop
前端·javascript
烟袅11 小时前
一文看懂 Promise:异步任务的“执行流程控制器”
前端·javascript
冴羽11 小时前
从 useState 到 URLState:为什么大佬们都在删状态管理代码?
前端·javascript·vue.js
郑州光合科技余经理11 小时前
乡镇外卖跑腿小程序开发实战:基于PHP的乡镇同城O2O
java·开发语言·javascript·spring cloud·uni-app·php·objective-c