【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

相关推荐
计算机毕设VX:Fegn0895几秒前
计算机毕业设计|基于springboot + vue个人博客系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·课程设计
Jim-2ha08 分钟前
【JavaScript】常见排序算法实现
javascript·算法·排序算法
2501_9466756410 分钟前
Flutter与OpenHarmony打卡轮播图组件
java·javascript·flutter
nwsuaf_huasir27 分钟前
积分旁瓣电平-matlab函数
前端·javascript·matlab
幽络源小助理32 分钟前
SpringBoot+Vue美食网站系统源码 | Java餐饮项目免费下载 – 幽络源
java·vue.js·spring boot
李少兄1 小时前
时间戳转换工具
开发语言·javascript·工具
这是个栗子1 小时前
【Vue代码分析】vue方法的调用与命名问题
前端·javascript·vue.js·this
全栈前端老曹1 小时前
【前端路由】Vue Router 动态导入与懒加载 - 使用 () => import(‘...‘) 实现按需加载组件
前端·javascript·vue.js·性能优化·spa·vue-router·懒加载
温宇飞1 小时前
高效的线性采样高斯模糊
javascript·webgl
POLITE31 小时前
Leetcode 160.相交链表 JavaScript (Day 9)
javascript·leetcode·链表