【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

相关推荐
王霸天4 分钟前
🚨 还在用 rem) 做大屏适配?用 vfit.js 一键搞定,告别改稿8版的噩梦!
前端·vue.js·数据可视化
Beginner x_u42 分钟前
前端八股整理|JavaScript|高频小题 01
开发语言·前端·javascript
Mr Xu_1 小时前
Vue3 + Leaflet实战:深入解析MarkerCluster点位聚合插件的使用与优化
前端·javascript·vue.js
源码宝1 小时前
使用 PHP(Laravel 8)+ Vue 2 + Element UI + MySQL 5.7开发一套医院不良事件系统的注意事项
vue.js·php·laravel
D_C_tyu1 小时前
Vue + Leaflet 实现地图任意点位点击查看时间功能
前端·javascript·vue.js
白叔King1 小时前
aardio时间日期转换中文时间
前端·javascript·aardio
斯班奇的好朋友阿法法1 小时前
ollama离线导入大模型
服务器·前端·javascript
踩着两条虫1 小时前
VTJ.PRO 在线应用开发平台的术语表
vue.js·低代码·ai编程
踩着两条虫1 小时前
VTJ.PRO 在线应用开发平台的构建与发布脚本
vue.js·ai编程·前端工程化
kyriewen1 小时前
MutationObserver:DOM界的“卧底”,暗中观察每个风吹草动
前端·javascript·面试