element中下拉框select在长页面滚动时，下拉弹框没有跟随下拉框跑路

最新推荐文章于 2024-04-10 18:34:29 发布
最新推荐文章于 2024-04-10 18:34:29 发布
阅读量1w 收藏 8
点赞数 3
分类专栏： 婉约派
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41166682/article/details/106575636
版权

1.需求：
在这里插入图片描述
在页面滚动过程中，弹框并没有跟着下拉框一起跑，一直固定在那个位置
2.修改：
在tamplate中：

<el-col :span="10" class="tb-row" style="float: right;">
  <el-form-item label="经营性质" prop
最低0.47元/天 解锁文章
element 中添加一个属性就可解决 el-select 和 el-cascader 下拉项 不随页面滚动问题
m0_46862838的博客
06-15 2013
经常会遇到滚动页面时，下拉框总是会随着页面滚动条变化而发生改变，或者滚动页面时下拉框就会覆盖在上面层级较高，这样用户体验就非常不好，所以就需要固定
vue3+elementUI-plus实现select下拉框的虚拟滚动
xingchen678的博客
08-14 2531
vue3+elementUI-plus实现select下拉框的虚拟滚动
关于el-select下拉框不跟随页面滚动问题
m0_54882260的博客
06-02 3478
关于el-select下拉框不跟随页面滚动
element 中添加一个属性就可解决 el-select 和 el-cascader 等下拉项 不随页面滚动问题
IT_iosers的博客
06-27 1547
element 中添加一个属性就可解决 el-select 和 el-cascader 等下拉项 不随页面滚动问题
【elementUI样式】模态框中的el-select下拉框不跟随页面滚动问题
前端代码小白的日常博客
11-29 4506
popper-append-to-body 属性是 Element-ui 官方文档中提供的一个属性，该属性的用途: 就是将 el-select 选项的内容移动 div#app 当中，默认值是 true;当页面滚动的时候，el-select的内容跟随页面移动，不是跟随el-select下面的input进行移动，想要实现的效果如下图。important 为所有样式的最高级，可以通过外联的样式来个更改el-select本身自带的样式。模态框中的el-select下拉框不跟随页面滚动问题。
el-select下拉框不跟随页面滚动/不随滚动条滚动问题/页面滚动时位置错乱, element 下拉选项层级过高问题
chn4556233的博客
07-19 2255
el-select下拉框不跟随页面滚动/不随滚动条滚动问题/页面滚动时位置错乱, element 下拉选项层级过高问题
解决：el-select，el-cascader或el-date-picker的下拉框不随滚动条滚动。
qq_38969618的博客
06-22 6078
el-select下拉框不随滚动条滚动
elementui Cascader 和 Select 当页面滚动时，下拉框不一起跟着滚动的问题
zhengyun1568的博客
04-21 1808
原文链接：https://www.cnblogs.com/suiyide/p/14511683.html 当出现多个滚动条，滚动元素父级滚动条会随着动，但是滚动父级的父级滚动条不会随着动 Select加上 :popper-append-to-body=“false” Cascader加上 :append-to-body=“false” ...
在element-ui的select下拉框加上滚动加载
12-12
在项目中，我们需要运用到很多来自后端返回的数据。...于是《在element-ui的select下拉框加上滚动加载》诞生了。 这里通过自定义封装vue指令进行封装。（什么是指令：官方指令叫v-on,v-model） 以下以element-ui中的sel
浅谈Vue Element中Select下拉框选取值的问题
08-27
在 Vue Element 中，Select 下拉框是非常常用的一个组件，它可以让用户快速地选择某个选项。但是，在实际开发中，我们经常会遇到一些问题，例如如何获取选中后的值、如何动态地加载选项等。在这篇文章中，我们将浅谈...
解决element ui select下拉框不回显数据问题的解决
10-17
在开发Vue.js应用时，Element UI是一个常用的组件库，提供了丰富的UI组件，其中包括`el-select`下拉选择框。然而，在实际使用过程中，有时会遇到`el-select`无法正确回显已选择数据的问题。本篇文章将深入探讨这个...
element中在长页面滚动时，下拉弹框没有跟随移动的问题
qq_37236241的博客
08-04 6280
具体问题如图： 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；其他层尽量不要设...
【Antd】select 下拉选框不跟随页面滚动
Hermia_yuan的博客
10-09 793
使用 :getPopupContainer="trigger => trigger.parentNode"下拉选框不跟随页面滚动导致与选框分离。
el-select下拉框不随页面滚动而移动
qq_37291367的博客
04-10 680
el-select 上 :popper-append-to-body=“false”
vxe-table select 下拉框不跟随输入框滚动的bug
Black_Straight的博客
11-09 678
vxe-table select 下拉框不跟随输入框滚动的bug
页面滚动时隐藏element-ui下拉框/时间弹框
a736755244的博客
11-04 1882
页面 滚动 隐藏 element-ui 下拉框 时间弹框
关于el-select下拉框在弹窗内滚动时脱离问题
Momo_dyx的博客
10-26 1599
因为el-select的下拉框的z-index位置最高，所以在弹窗滚到一定位置时出现脱离、超出弹窗的问题
＜ element-UI中 el-select组件，下拉时内容无法显示滚动条 ＞
一个平平无奇的技术宅
08-04 2467
在前端开发中，我们会使用到`v-for`循环一些选择类型组件的选项，便于接受后端返回的数据，用于渲染在组件上。 结构较为简单！ 但是当后端数据传回较慢时，或者渲染时，赋值方法有误，可能会导致element组件无法及时重新判断样式，导致组件选择样式有误！...
element dialog对话框中select/cascader 弹窗不跟随问题
不确定因素的博客
05-30 1762
Select 选择器Cascader 级联选择器在这两种组件组合使用是出现了滑动 弹出框不跟随情况，如下出现这种情况原因是因为弹出框相对的位置是body，展示后，如果body不动，所以弹窗位置不会发生改变。
页面滚动时隐藏el-select下拉框(vue+element)
最新发布
11-23
在Vue.js配合Element UI开发时，如果你想要实现在页面滚动时隐藏`el-select`组件的下拉菜单，你可以使用`@scroll`事件和元素的高度计算来动态控制。首先，确保你的`el-select`有`.el-select-dropdown`这个CSS类关联到它的下拉部分。然后，添加如下的Vue组件内脚本： ```html <template> <div ref="selectContainer"> <el-select v-model="selectedValue" @scroll.native.prevent> <!-- select options --> </el-select> </div> </template> <script> export default { data() { return { selectedValue: '', }; }, mounted() { this.$refs.selectContainer.addEventListener('scroll', this.handleScroll); }, methods: { handleScroll() { const dropdownHeight = this.$refs.selectDropdown.offsetHeight; const scrollTop = this.$refs.selectContainer.scrollTop; if (scrollTop + this.$refs.selectContainer.clientHeight >= dropdownHeight) { // 当滚动到底部时 this.$refs.selectDropdown.style.maxHeight = '0'; // 隐藏下拉框 } else { this.$refs.selectDropdown.style.maxHeight = null; // 显示下拉框 } }, }, beforeDestroy() { this.$refs.selectContainer.removeEventListener('scroll', this.handleScroll); // 移除监听 }, }; </script> <style scoped> .el-select-dropdown { /* 如果你的下拉框有自己的CSS选择器，替换为对应的 */ .el-select-dropdown { max-height: 0; /* 初始状态隐藏下拉框 */ } </style> ``` 这里的关键在于`handleScroll`方法，当用户滚动到`selectContainer`的底部时，设置下拉菜单的最大高度为0，使其不可见。当你向上滚动时，下拉菜单会恢复默认样式。
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值