脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → element-ui el-select下拉框el-date-picker弹出框定位

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弹出框定位内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue.js 父向子组件传参的实例代码

    vue.js 父向子组件传参的实例代码

    这篇文章主要介绍了vue.js 父向子组件传参的实例代码,需要的朋友可以参考下
    2017-10-10
  • element-plus中el-upload组件限制上传文件类型的方法

    element-plus中el-upload组件限制上传文件类型的方法

     Element Plus 中,el-upload 组件可以通过设置 accept 属性来限制上传文件的格式,这篇文章主要介绍了element-plus中el-upload组件限制上传文件类型,需要的朋友可以参考下
    2024-02-02
  • Vue中挂载全局的方法详解

    Vue中挂载全局的方法详解

    有时候,频繁调用的函数,我们需要把它挂载在全局的vue原型上,方便调用,这篇文章主要为大家详细介绍了Vue中挂载全局的具体操作,需要的可以参考下
    2024-03-03
  • vue2.0 路由模式mode=

    vue2.0 路由模式mode="history"的作用

    这篇文章主要介绍了vue2.0 路由模式mode="history"的作用，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-10-10
  • Vue uni-app框架实现上拉加载下拉刷新功能

    Vue uni-app框架实现上拉加载下拉刷新功能

    uni-app是一个使用Vue.js(opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台
    2022-09-09
  • 利用VUE框架，实现列表分页功能示例代码

    利用VUE框架，实现列表分页功能示例代码

    本篇文章主要介绍了利用VUE框架，实现列表分页功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-01-01
  • vue3数据可视化实现数字滚动特效代码

    vue3数据可视化实现数字滚动特效代码

    这篇文章主要介绍了vue3数据可视化实现数字滚动特效,实现思路是使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，详细代码跟随小编一起看看吧
    2022-09-09
  • vue2和vue3中provide/inject的基本用法示例

    vue2和vue3中provide/inject的基本用法示例

    Vue中的provide/inject是一种组件间通信的方式,它允许父组件向子组件传递数据,而不需要通过props或事件来实现,下面这篇文章主要给大家介绍了关于vue2/vue3中provide/inject的基本用法的相关资料,需要的朋友可以参考下
    2023-04-04
  • 解决vue+webpack项目接口跨域出现的问题

    解决vue+webpack项目接口跨域出现的问题

    这篇文章主要介绍了解决vue+webpack项目接口跨域出现的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue项目中添加锁屏功能实现思路

    Vue项目中添加锁屏功能实现思路

    这篇文章主要介绍了Vue项目中添加锁屏功能的实现思路，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06

最新评论