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

最新推荐文章于 2024-06-04 14:09:20 发布
最新推荐文章于 2024-06-04 14:09:20 发布
阅读量1.5k 收藏
点赞数
分类专栏： vue 文章标签： elementui vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46862838/article/details/125291584
版权

经常会遇到滚动页面时，下拉框总是会随着页面滚动条变化而发生改变，或者滚动页面时下拉框就会覆盖在上面层级较高，这样用户体验就非常不好，所以就需要固定

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

<el-select
  v-model="type"
  clearable
  filterable
  :placeholder="placeholder"
  :
最低0.47元/天 解锁文章
草莓煎饼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题
01-25
关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题
解决：el-select，el-cascader或el-date-picker的下拉框不随滚动条滚动。
qq_38969618的博客
06-22 5328
el-select下拉框不随滚动条滚动
element中使用el-select封装树形下拉选择
最新发布
weixin_52507110的博客
06-04 270
element中使用el-select封装树形下拉选择
关于el-select下拉框不跟随页面滚动问题
m0_54882260的博客
06-02 3143
关于el-select下拉框不跟随页面滚动
关于el-select下拉框在弹窗内滚动时脱离问题
Momo_dyx的博客
10-26 887
因为el-select的下拉框的z-index位置最高，所以在弹窗滚到一定位置时出现脱离、超出弹窗的问题
【elementUI样式】模态框中的el-select下拉框不跟随页面滚动问题
前端代码小白的日常博客
11-29 4026
popper-append-to-body 属性是 Element-ui 官方文档中提供的一个属性，该属性的用途: 就是将 el-select 选项的内容移动 div#app 当中，默认值是 true;当页面滚动的时候，el-select的内容跟随页面移动，不是跟随el-select下面的input进行移动，想要实现的效果如下图。important 为所有样式的最高级，可以通过外联的样式来个更改el-select本身自带的样式。模态框中的el-select下拉框不跟随页面滚动问题。
element中在长页面滚动时，下拉弹框没有跟随移动的问题
qq_37236241的博客
08-04 5787
具体问题如图： 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；其他层尽量不要设...
详解element-ui中el-select的默认选择项问题
10-16
在Element-UI，一个流行的Vue.js组件库中，`el-select`组件被广泛用于实现下拉选择功能。本文将深入探讨`el-select`组件在设置默认选择项时可能遇到的问题及解决方案。 首先，`el-select`是Element-UI提供的一个...
详解为element-ui的Select和Cascader添加弹层底部操作按钮
10-15
在Element UI中，`el-select`和`el-cascader`是两个常用的组件，用于下拉选择和级联选择。然而，它们默认并未提供在弹出层底部添加自定义操作按钮的功能。本篇文章将深入探讨如何通过自定义方法实现这个功能，以便在...
element的el-time-select 下拉框位置偏移解决思路
weixin_44416517的博客
11-27 2529
element的el-time-select 下拉框位置偏移的情况，在没有popper-append-to-body属性的情况下的解决思路
element中下拉框select在长页面滚动时，下拉弹框没有跟随下拉框跑路
weixin_41166682的博客
06-05 9618
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 等下拉项 不随页面滚动问题
IT_iosers的博客
06-27 1361
element 中添加一个属性就可解决 el-select 和 el-cascader 等下拉项 不随页面滚动问题
element dialog对话框中select/cascader 弹窗不跟随问题
不确定因素的博客
05-30 1519
Select 选择器Cascader 级联选择器在这两种组件组合使用是出现了滑动 弹出框不跟随情况，如下出现这种情况原因是因为弹出框相对的位置是body，展示后，如果body不动，所以弹窗位置不会发生改变。
el-select下拉框不跟随页面滚动/不随滚动条滚动问题/页面滚动时位置错乱, element 下拉选项层级过高问题
chn4556233的博客
07-19 1598
el-select下拉框不跟随页面滚动/不随滚动条滚动问题/页面滚动时位置错乱, element 下拉选项层级过高问题
el-select 内容显示不完整解决方法
weixin_42349215的博客
08-24 2577
:popper-append-to-body="false" /deep/ .el-select-dropdown__wrap.el-scrollbar__wrap{ margin-bottom: 0 !important; } 组件el-select会默认添加到body里面，因此只修改样式不能直接起作用，需要添加第一行！！！
【element】 el-select 下拉框内容跟随页面滚
rbgg_mp的博客
02-13 1948
element el-select
Element-ui中el-select默认展开设置
weixin_50301714的博客
11-24 1882
Element-ui中el-select默认展开设置，全网解释的比较清楚的，提供给大家使用的思路
el-cascader的下拉事件
07-27
el-cascader的下拉事件可以通过监听组件的"visible-change"事件来实现。当下拉框展开或收起时，该事件会被触发。你可以在事件处理函数中执行相应的操作。例如，你可以在事件处理函数中添加代码来改变下拉框的样式或执行其他逻辑操作。具体的代码示例如下： ```javascript <el-cascader @visible-change="handleVisibleChange" ...></el-cascader> ... methods: { handleVisibleChange(visible) { if (visible) { // 下拉框展开时的操作 // 可以在这里添加代码来改变下拉框的样式或执行其他逻辑操作 } else { // 下拉框收起时的操作 // 可以在这里添加代码来改变下拉框的样式或执行其他逻辑操作 } } } ``` 在上述代码中，我们通过监听"visible-change"事件，并在事件处理函数中根据下拉框的展开状态来执行相应的操作。你可以根据自己的需求在事件处理函数中添加代码来实现你想要的功能。 #### 引用[.reference_title] - *1* [element 中添加一个属性就可解决 el-select 和 el-cascader 下拉项 不随页面滚动问题](https://blog.csdn.net/m0_46862838/article/details/125291584)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [element中el-cascader级联 下拉选择-可单独多选（整理）](https://blog.csdn.net/qq_38881495/article/details/125523448)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [在el-dialog中el-cascader下拉面板样式错乱](https://blog.csdn.net/m0_60763952/article/details/126037591)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值