[绍棠] iview Select下拉框被overflow遮挡的问题

问题概述

如果你没有使用插件，没有使用别人给的组件，这个问题一般是不会出现的。但是如果你使用了别人的组件，那么你就会遇到这个问题。我这里说说我遇到的这个问题的地方，总共是2个地方。

是我在使用iview的，使用select，由于父级框position: relative，并且overflow:auto，所以select下拉框的时候就被挡在父级下面（虽然滚动可以看到，但是觉得很不舒服）
是我在使用vue-treeselect的时候，这个哥们也是和上面一样，被挡在了下面。（这个不演示了，道理一样）

上述问题的解决

iview的select组件里面有一个transfer属性，添加就可以使下拉框到最高层，没有东西可以遮挡。
vue-treeselect是采用了里面的appendToBody属性为true，和设置z-index属性为9999，使之到最高层显示。（这个不演示了，道理一样）

分析

上面两种的select插件处理方法也是人家插件里面准备好的，我只是使用而已。但是我在前端通过源代码的查看，发现其实他们的处理方式是一摸一样的。

他们的处理方式都是将下拉框整体加入到body里面，这样下拉框所处的位置就不是原来select的父级框下面了，而是在body里面，然后定位到指定位置，通过position和z-index，绝对定位absoult到指定的位置，然后将层级提高，这样的下拉框显示出来就是最高层级，也不会收到父级框的限制。

[绍棠] iview Select下拉框被overflow遮挡的问题相关推荐

iview select选中值取值_完美解决iview 的select下拉框选项错位的问题
在使用iview的过程中,我遇到这样一个问题,在Model中使用select下拉框组件.但是当弹出框超过一屏需要滚动时,select的下拉选项会出现错位(下图1为正常,图2为滚动后,下拉选项错位.) ...
iview select 怎么清空_如何解决iview 的select下拉框选项错位的问题，具体操作如下...
下面我就为大家分享一篇完美解决iview 的select下拉框选项错位的问题,具有很好的参考价值,希望对大家有所帮助. 在使用iview的过程中,我遇到这样一个问题,在Model中使用select下拉 ...
设置select下拉框不可修改的→“四”←种方法
设置select下拉框为不可修改的几种方法: 因为select的特殊性,导致它不能像input表单一样简单地设置一个readonly来限制修改,所以,我们需要进行别的操作! 1.为下拉框添加样式,可以 ...
php 获取下拉框选中的文本,jQuery实现select下拉框获取当前选中的文本
本文主要介绍了jQuery实现select下拉框获取当前选中文本.值.索引以及添加/删除Select的Option项的相关知识,具有很好的参考价值.下面跟着小编一起来看下吧,希望能帮助到大家. 话不多 ...
隐藏原生select下拉框的向下箭头▼
select {appearance: none;/*隐藏原生select下拉框的向下箭头▼*/ }
CSS-解决苹果点击高亮、安卓select灰色背景（select下拉框在IOS中背景变黑、出现阴影问题）
CSS-解决苹果点击高亮.安卓select灰色背景(select下拉框在IOS中背景变黑.出现阴影问题) 参考文章: (1)CSS-解决苹果点击高亮.安卓select灰色背景(select下拉框在IO ...
select下拉框兼容写法
去除select下拉框默认样式 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的sele ...
layui给select下拉框赋值
layui给select下拉框赋值 //重新渲染表单函数function renderForm() {layui.use('form', function() {var form = layui.fo ...
html下拉框只读,HTML元素（如select下拉框）设置为只读
其实就是利用了鼠标事件和去焦点功能. 以select下拉框为例: οnmοuseοut="this.releaseCapture();"> value="optio ...

[绍棠] iview Select下拉框被overflow遮挡的问题

问题概述

上述问题的解决

分析

[绍棠] iview Select下拉框被overflow遮挡的问题相关推荐

最新文章

热门文章