element 中添加一个属性就可解决 el-select 和 el-cascader 等下拉项 不随页面滚动问题

最新推荐文章于 2024-04-10 18:34:29 发布
最新推荐文章于 2024-04-10 18:34:29 发布
阅读量1.5k 收藏 5
点赞数 2
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/IT_iosers/article/details/125478683
本文详细介绍了如何在el-select、el-cascader和el-date-picker等前端组件中使用:popper-append-to-body属性，通过设置为false来避免弹出层定位问题，提升用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

建议 ：有popper-append-to-body 用这个属性 没有 就用append-to-body="false

一、 el-select 添 加 :popper-append-to-body="false"

二、 el-cascader 添 加 :append-to-body="false"

三、el-date-picker添 加 :append-to-body="false"
element中下拉框select在长页面滚动时，下拉弹框没有跟随下拉框跑路
weixin_41166682的博客
06-05 1万+
1.需求： 在页面滚动过程中，弹框并没有跟着下拉框一起跑，一直固定在那个位置 2.修改： 在tamplate中： <el-col :span="10" class="tb-row" style="float: right;"> <el-form-item label="经营性质" prop="proTypeCode"> <el-select v-model="formData.proTypeCode" placeholder="请选择经营性质" filterabl
element 中添加一个属性就可解决 el-select 和 el-cascader 下拉项 不随页面滚动问题
m0_46862838的博客
06-15 2045
经常会遇到滚动页面时，下拉框总是会随着页面滚动条变化而发生改变，或者滚动页面时下拉框就会覆盖在上面层级较高，这样用户体验就非常不好，所以就需要固定
解决：el-select，el-cascader或el-date-picker的下拉框不随滚动条滚动。
qq_38969618的博客
06-22 6173
el-select下拉框不随滚动条滚动
关于el-select下拉框不跟随页面滚动问题
m0_54882260的博客
06-02 3506
关于el-select下拉框不跟随页面滚动
el-select下拉框不跟随页面滚动/不随滚动条滚动问题/页面滚动时位置错乱, element 下拉选项层级过高问题
chn4556233的博客
07-19 2362
el-select下拉框不跟随页面滚动/不随滚动条滚动问题/页面滚动时位置错乱, element 下拉选项层级过高问题
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
在使用element-ui开发Web项目时，经常会遇到一些组件使用上的细节问题，其中element-ui中的下拉多选框组件el-select使用时，如何设置默认值且不可删除，是一个较为常见的需求。本文将详细介绍如何解决这个问题，以及...
关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题
01-25
在Vue.js开发中，ElementUI是一个非常流行的前端组件库，它提供了丰富的UI组件，如Select和Cascader，用于构建用户界面。然而，在实际使用过程中，可能会遇到一些问题，比如Select下拉选项（el-option）在页面滚动时...
详解element-ui中el-select的默认选择项问题
10-16
在Element-UI，一个流行的Vue.js组件库中，`el-select`组件被广泛用于实现下拉选择功能。本文将深入探讨`el-select`组件在设置默认选择项时可能遇到的问题及解决方案。 首先，`el-select`是Element-UI提供的一个...
Vue: 多个el-select不能重复选择相同属性
02-22
当我们在项目中遇到“多个el-select不能重复选择相同属性”的问题时，这意味着我们可能需要实现一种机制来确保不同select组件之间的选项值不发生冲突，即用户不能在多个select中选择相同的值。以下是对这个问题的...
【Antd】select 下拉选框不跟随页面滚动
Hermia_yuan的博客
10-09 812
使用 :getPopupContainer="trigger => trigger.parentNode"下拉选框不跟随页面滚动导致与选框分离。
【elementUI样式】模态框中的el-select下拉框不跟随页面滚动问题
前端代码小白的日常博客
11-29 4526
popper-append-to-body 属性是 Element-ui 官方文档中提供的一个属性，该属性的用途: 就是将 el-select 选项的内容移动 div#app 当中，默认值是 true;当页面滚动的时候，el-select的内容跟随页面移动，不是跟随el-select下面的input进行移动，想要实现的效果如下图。important 为所有样式的最高级，可以通过外联的样式来个更改el-select本身自带的样式。模态框中的el-select下拉框不跟随页面滚动问题。
el-select下拉框不随页面滚动而移动
qq_37291367的博客
04-10 697
el-select 上 :popper-append-to-body=“false”
element dialog对话框中select/cascader 弹窗不跟随问题
不确定因素的博客
05-30 1774
Select 选择器Cascader 级联选择器在这两种组件组合使用是出现了滑动 弹出框不跟随情况，如下出现这种情况原因是因为弹出框相对的位置是body，展示后，如果body不动，所以弹窗位置不会发生改变。
elementui Cascader 和 Select 当页面滚动时，下拉框不一起跟着滚动的问题
zhengyun1568的博客
04-21 1815
原文链接：https://www.cnblogs.com/suiyide/p/14511683.html 当出现多个滚动条，滚动元素父级滚动条会随着动，但是滚动父级的父级滚动条不会随着动 Select加上 :popper-append-to-body=“false” Cascader加上 :append-to-body=“false” ...
＜ element-UI中 el-select组件，下拉时内容无法显示滚动条 ＞
一个平平无奇的技术宅
08-04 2491
在前端开发中，我们会使用到`v-for`循环一些选择类型组件的选项，便于接受后端返回的数据，用于渲染在组件上。 结构较为简单！ 但是当后端数据传回较慢时，或者渲染时，赋值方法有误，可能会导致element组件无法及时重新判断样式，导致组件选择样式有误！...
ElementUI的el-select，el-cascader或el-date-picker的下拉框不随滚动条滚动
weixin_45856221的博客
12-06 914
ElementUI的el-select，el-cascader或el-date-picker的下拉框不随滚动条滚动
IE6、IE7下解决Select框不随滚动条滚动的问题
myjlvzlp的专栏
11-27 3511
IE6、IE7下解决Select框不随滚动条滚动的问题   如果在IE6、IE7下出现Select下拉框不随滚动条滚动的问题，那么你肯定对Select框设置了position:relative;定位并且其父元素或祖先元素设置了overflow:auto这两个CSS样式了。正是因为这两个样式导致了在IE6和IE7下的这个问题。  其实解决办法很简单，就是对Select的父元素或者祖先元素也加个
element中在长页面滚动时，下拉弹框没有跟随移动的问题
qq_37236241的博客
08-04 6310
具体问题如图： el-dropdown el-select 网上常规解决办法： el-select解决办法 :popper-append-to-body=“falsel-d el-dropdown解决办法 没有找到 我的解决办法（参考:element-ui/src/util/popper.js）: 弹出框随着滚动条移动的原理是通过监听window resize；而页面的弹出框是挂在了body下，所以滚动条要在最外层设置overflow:auto；其他层尽量不要设...
关于el-select下拉框在弹窗内滚动时脱离问题
Momo_dyx的博客
10-26 1614
因为el-select的下拉框的z-index位置最高，所以在弹窗滚到一定位置时出现脱离、超出弹窗的问题
el-select下拉多选框 el-select 默认值不可删除问题
最新发布
01-23
### el-select 多选框默认值不可删除的原因分析 Element UI 的 `el-select` 组件在多选模式下确实存在一些已知的问题，特别是在涉及远程搜索和动态加载数据时。当遇到默认值无法删除的情况时，通常是因为以下几个原因： - 数据绑定不一致：`v-model` 所绑定的数据与实际渲染的选项之间可能存在差异。 - 缺少必要的属性配置：某些必需的属性未被正确设置，导致交互行为异常。 ### 解决方案 为了使 `el-select` 多选框中的默认值可以正常删除，在现有代码基础上做如下调整[^2]： #### 1. 确保双向绑定的数据格式正确无误 ```javascript // 假设 docInfo.columnId 是存储选中项 ID 数组的对象 data() { return { docInfo: { columnId: [] // 初始化为空数组 } }; } ``` #### 2. 添加 `clearable` 属性并确保其有效工作 虽然已有 `clearable` 和 `multiple` 属性，但仍需确认这些属性是否按预期生效。可以通过移除其他可能干扰此功能的属性来测试效果。 #### 3. 使用 `$nextTick()` 方法刷新视图 有时 Vue.js 可能不会立即更新 DOM 结构，因此可以在改变模型后手动触发一次强制更新: ```html <template> <!-- ... --> </template> <script> export default { methods: { handleSelectionChange(value) { this.$nextTick(() => { this.docInfo.columnId = value; }); }, remoteMethod(query) { /*...*/ } } }; </script> ``` #### 4. 调整事件监听方式 尝试修改变更事件处理器的方式，以确保每次选择变化都能得到及时响应： ```html <!-- 修改后的模板部分 --> <el-select multiple filterable clearable remote :remote-method="remoteMethod" placeholder="请输入关键词搜索合辑" v-model="docInfo.columnId" @change="handleSelectionChange"> <el-option v-for="item in columns" :key="item.id" :label="item.title" :value="item.id"/> </el-select> ``` 通过上述方法应该能够解决 `el-select` 多选框内默认值无法删除的问题。如果仍然存在问题，则建议进一步排查是否存在样式冲突或其他 JavaScript 错误影响到了组件的行为。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值