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

最新推荐文章于 2024-04-10 18:34:29 发布
原创 最新推荐文章于 2024-04-10 18:34:29 发布 · 1.6k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #elementui #javascript

本文详细介绍了如何在el-select、el-cascader和el-date-picker等前端组件中使用:popper-append-to-body属性，通过设置为false来避免弹出层定位问题，提升用户体验。

建议 ：有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 2122
经常会遇到滚动页面时，下拉框总是会随着页面滚动条变化而发生改变，或者滚动页面时下拉框就会覆盖在上面层级较高，这样用户体验就非常不好，所以就需要固定
el-select下拉框不跟随页面滚动/不随滚动条滚动问题/页面滚动时位置错乱, element 下拉选项层级过高问题
chn4556233的博客
07-19 2577
el-select下拉框不跟随页面滚动/不随滚动条滚动问题/页面滚动时位置错乱, element 下拉选项层级过高问题
解决：el-select，el-cascader或el-date-picker的下拉框不随滚动条滚动。
qq_38969618的博客
06-22 6476
el-select下拉框不随滚动条滚动
关于el-select下拉框不跟随页面滚动问题
m0_54882260的博客
06-02 3645
关于el-select下拉框不跟随页面滚动
解决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中选择相同的值。以下是对这个问题的...
ElementUI的el-select，el-cascader或el-date-picker的下拉框不随滚动条滚动
weixin_45856221的博客
12-06 955
ElementUI的el-select，el-cascader或el-date-picker的下拉框不随滚动条滚动
【Antd】select 下拉选框不跟随页面滚动
Hermia_yuan的博客
10-09 915
使用 :getPopupContainer="trigger => trigger.parentNode"下拉选框不跟随页面滚动导致与选框分离。
【elementUI样式】模态框中的el-select下拉框不跟随页面滚动问题
前端代码小白的日常博客
11-29 4651
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 738
el-select 上 :popper-append-to-body=“false”
element dialog对话框中select/cascader 弹窗不跟随问题
不确定因素的博客
05-30 1860
Select 选择器Cascader 级联选择器在这两种组件组合使用是出现了滑动 弹出框不跟随情况，如下出现这种情况原因是因为弹出框相对的位置是body，展示后，如果body不动，所以弹窗位置不会发生改变。
elementui Cascader 和 Select 当页面滚动时，下拉框不一起跟着滚动的问题
zhengyun1568的博客
04-21 1850
原文链接：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 2547
在前端开发中，我们会使用到`v-for`循环一些选择类型组件的选项，便于接受后端返回的数据，用于渲染在组件上。 结构较为简单！ 但是当后端数据传回较慢时，或者渲染时，赋值方法有误，可能会导致element组件无法及时重新判断样式，导致组件选择样式有误！...
IE6、IE7下解决Select框不随滚动条滚动的问题
myjlvzlp的专栏
11-27 3529
IE6、IE7下解决Select框不随滚动条滚动的问题   如果在IE6、IE7下出现Select下拉框不随滚动条滚动的问题，那么你肯定对Select框设置了position:relative;定位并且其父元素或祖先元素设置了overflow:auto这两个CSS样式了。正是因为这两个样式导致了在IE6和IE7下的这个问题。  其实解决办法很简单，就是对Select的父元素或者祖先元素也加个
element中在长页面滚动时，下拉弹框没有跟随移动的问题
qq_37236241的博客
08-04 6407
具体问题如图： 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 1736
因为el-select的下拉框的z-index位置最高，所以在弹窗滚到一定位置时出现脱离、超出弹窗的问题
创建一个自定义组件，利用 Element UI 的 el-select 和 el-table 组件来实现下拉表格。
最新发布
07-16
在 Element UI 中，`el-select` 和 `el-table` 是两个独立的组件，分别用于下拉选择和表格展示。为了实现一个结合两者功能的自定义组件（即“下拉表格”），需要利用 Vue 的自定义组件机制、插槽机制以及 Element UI 提供的 Popover 或 Dialog 等弹出层控件来构建。 ### 实现思路 1. **使用 `el-popover` 作为容器** 将 `el-table` 放置在 `el-popover` 中，并通过点击触发显示或隐藏表格。 2. **绑定选中值** 当用户在表格中选择某一行时，将该行数据同步到 `el-select` 显示框中。 3. **支持搜索与筛选功能** 可以在表格上方添加一个输入框，用于对表格数据进行过滤。 4. **支持分页** 若数据量较大，可以结合 `el-pagination` 实现分页加载[^4]。 --- ### 示例代码 以下是一个基础实现示例： ```vue <template> <div> <el-popover placement="bottom" width="500" trigger="click" v-model="visible" > <el-input v-model="searchQuery" placeholder="请输入关键字搜索" style="margin-bottom: 10px;" /> <el-table :data="filteredTableData" @row-click="handleRowClick"> <el-table-column prop="label" label="名称"></el-table-column> <el-table-column prop="value" label="编号"></el-table-column> </el-table> <el-button slot="reference" type="text">{{ selectedLabel || '请选择' }}</el-button> </el-popover> </div> </template> <script> export default { data() { return { visible: false, searchQuery: '', selectedValue: '', selectedLabel: '', tableData: [ { label: '选项一', value: '1' }, { label: '选项二', value: '2' }, { label: '选项三', value: '3' }, // 更多数据... ] }; }, computed: { filteredTableData() { if (!this.searchQuery) return this.tableData; return this.tableData.filter(item => item.label.includes(this.searchQuery) || item.value.includes(this.searchQuery) ); } }, methods: { handleRowClick(row) { this.selectedValue = row.value; this.selectedLabel = row.label; this.visible = false; this.$emit('input', row.value); } } }; </script> ``` --- ### 扩展功能建议 - **远程加载数据**：可以通过 API 接口动态获取表格数据，并结合 `loading` 状态提升用户体验。 - **分页支持**：引入 `el-pagination` 组件，实现分页加载大数据集[^4]。 - **表单校验**：若需在表单项中使用此组件，可封装为 Form Item 并支持 `rules` 验证规则[^3]。 - **自定义列渲染**：允许用户传入列配置对象，实现更灵活的列展示。 --- ### 总结 通过组合 `el-popover`、`el-table` 和 `el-input` 等组件，可以构建一个功能丰富的下拉表格组件。进一步封装后，它可以在多个业务场景中复用，并支持搜索、分页、数据绑定等高级特性。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值