el-select下拉框或搜索结果(el-option)偏移的解决方法
/deep/ el-select-dropdown el-popper {position: absolute !important;top: 30px !important;left: 0px !important;}
el-select的下拉框结果偏移有多种原因造成的,可以使用下列方法,一个个试过去。
方法一(下拉弹出框向下偏移时可以使用此方法):
/deep/ el-select-dropdown el-popper {
position: absolute !important;
top: 30px !important;
left: 0px !important;
}
方法二:
- 如果是
el-select
在el-select
标签中加入:popper-append-to-body="false"
这个属性,记住前面有“:
” - 如果是
el-cascader
在el-cascader
标签中加入:append-to-body="false"
这个属性。element 其他的弹框组件也有类似的问题,也可以使用这个属性处理
如果下拉框el-select
使用:popper-append-to-body="false"
出现el-option
向右偏移5px
的情况,则需要调一下css样式了:
.el-select > .el-select-dropdown {
transform:translateX(-5px);
}
或者删掉:popper-append-to-body="false"
如果是el-dialog+el-tooltip+el-select的组合造成的偏移,则需要对el-dialog
中的el-select
进行样式调整,具体的top
值和left
值根据实际页面偏移情况进行调整:
<el-dialog>
<el-form>
<el-form-item>
<el-tooltip
popper-class="remote-tooltip"
:popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"
>
<el-select
v-model="xxxxxx"
filterable
remote
clearable
reserve-keyword
:remote-method="remoteMethod"
popper-class="select-popper"
<style lang="scss" scoped>
.dialog {
/deep/.select-popper {
position: fixed;
top: 100px !important;
left: 133px !important;
}
如果是el-tooltip+el-select+remote的组合出现下拉弹出框偏移情况,则使用:popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"
和:popper-append-to-body="false"
注意,如果使用:popper-append-to-body="false"
。会导致点击el-select
的el-option
时也会触发el-select
的@focus
事件
使用el-popover+el-select或者el-tooltip+el-select造成的偏移的解决方案:
使用popper-options
属性
<el-form-item prop="result">
<el-tooltip
ref="toolTip"
placement="top"
:popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"
>
<el-select
ref="remoteSearch"
v-model="searchResult"
filterable
clearable
reserve-keyword
:remote-method="remoteMethod"
:loading="loading"
:disabled="disabled"
@input.native="input"
@change="change"
@focus="focus"
@mousewheel="mouseWheel"
>
<el-option
v-for="(item, key) in numberList_"
:key="key"
:label="item.label"
:value="item.value"
/>
<div v-if="numberList.length > 9 && numberList_.length !== numberList.length" ref="moreDiv" class="search-keyword">
<span @click="loadMore">加载更多...</span>
</div>
<div v-else class="search-keyword-bottom">
<span>到达底部</span>
</div>
</el-select>
</el-tooltip>
</el-form-item>
如果是动态数据,获取数据后结果还是会发生偏移
获取到数据之后要this.$refs.toolTip.updatePopper()一下(用来重新计算位置的)
elementui的el-select、el-time-select、el-date-picker、el-cascader等一些控件的下拉选项布局定位均是使用第三方库popper.js,所以如果跟定位(位置)有关的问题,可以从官方文档找到答案。点击此处进入官方文档。
popper.js的简单使用可参考这篇博文:
https://blog.csdn.net/jhzhahuaiyu/article/details/90213582
更多推荐
所有评论(0)