element-ui el-select下拉框el-date-picker弹出框定位问题解决方案(推荐)
更新时间：2024年07月02日 11:47:55 作者：小墨鱼_z
项目开发过程中发现el-select和el-date-picker弹出框显示时候,滚动屏幕,导致弹出框定位出现问题,这篇文章主要介绍了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
到此这篇关于element-ui el-select下拉框el-date-picker弹出框定位问题解决方案(推荐)的文章就介绍到这了,更多相关element-ui el-select下拉框el-date-picker弹出框定位内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在现代前端开发中,Vue3和Vite的组合已经成为许多开发者的首选,这篇文章主要介绍了Vue3+TypeScript项目架构实践的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2026-02-02
最近做时速云项目部署,需要将前端项目打成镜像文件,下面这篇文章主要给大家介绍了关于Vue项目打包成Docker镜像包的简单步骤,需要的朋友可以参考下2023-10-10
在Vue中实现放大镜效果,主要是为了增强用户体验,让用户在查看商品图片时能更清晰地观察细节,这篇文章主要介绍了vue3图片放大镜效果实现的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-11-11
vue3.0+element Plus实现页面布局侧边栏菜单路由跳转功能
这篇文章主要介绍了vue3.0+element Plus实现页面布局，侧边栏菜单路由跳转,需要的朋友可以参考下2023-07-07
数据拉取更新这个功能相信大家基本都见过，但是如果要做起来却不止如何做起，所以这篇文章给大家分享了vue.js通过自定义指令实现的方法，阅读本文需要对vue有一定理解，有需要的朋友们下面来一起看看吧。2016-10-10
这篇文章主要介绍了vue如何实现垂直居中，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
map()函数定义在JS的array中,它返回一个新的数组,下面这篇文章主要给大家介绍了关于Vue中map()的用法案例,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
在vue项目中使用动画其实有多种方式，可以使用vue中的过渡transition，可以使用animate动画与transition配合使用，也可以单独使用animate动画库，下面我们开始介绍在vue中单独使用animate动画，感兴趣的朋友一起看看吧2018-08-08
今天来看看JavaScript中的一些实用的工具函数，希望能帮助你提高开发效率！需要的朋友可以参考下面文章的具体内容2021-10-10
这篇文章主要介绍了Vue的混合继承，有需要的朋友可以借鉴参考下，希望能够有所帮助，希望能够给你带来帮助2021-11-11
最新评论