el-select的下拉框结果偏移有多种原因造成的,可以使用下列方法,一个个试过去。

方法一(下拉弹出框向下偏移时可以使用此方法):

/deep/ el-select-dropdown el-popper {
  position: absolute !important;
  top: 30px !important;
  left: 0px !important;
}

方法二:

  1. 如果是el-select
    el-select标签中加入:popper-append-to-body="false"这个属性,记住前面有“:
  2. 如果是el-cascaderel-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-selectel-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

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐