【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

相关推荐
小郎君6583 分钟前
(六)el-cascader 的展示值为什么不能直接 join:emitPath、路径还原与多选去重
vue.js·算法
Hilaku14 分钟前
前端的技术判断力是怎么练出来的?
前端·javascript·程序员
用户0936717554119 分钟前
用 4500 行 TypeScript 复刻了童年方格纸上的海战棋
前端·vue.js
miofly1 小时前
GitHub 今日推荐|floorplan:AI 读代码自动画交互式架构地图
javascript·开源·github
Dovis(誓平步青云)2 小时前
拖动关键帧角色就抽动,动画编辑器怎样补齐中间状态
开发语言·前端·javascript·机器学习·编辑器
lpfasd1232 小时前
pywebview与Electron
前端·javascript·electron
行走的陀螺仪2 小时前
Claude Code 从入门到实战(一):安装、登录与第一个Vue项目
前端·javascript·vue.js
vipxieliang2 小时前
解构赋值与展开运算符:现代 JS 提效技巧
javascript
2603_965896622 小时前
JavaScript 原型与原型链
开发语言·前端·javascript
晓得迷路了3 小时前
栗子前端技术周刊第 152 期 - Rspack 2.3、TypeScript 7.1 Beta、Bun 1.4.4...
前端·javascript·css