zoukankan      html  css  js  c++  java
  • element-ui select 下拉框位置错乱--解决

    element-ui select 下拉框位置错乱

    由于使用 element-ui 的 select 组件时,下拉框的位置错乱了。

    select

    开始查找问题

    通过各种问题查找,发现是 css 问题

    css

    body {
      position: relative;
    }
    #app {
      margin-top: 70px;
    }
    

    html

    <div id="app">
      <el-select v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.code" :label="item.name" :value="item.name">
        </el-option>
      </el-select>
    </div> 
    

    最初是使用 popper-append-to-body 来解决,但是由于父元素使用了 overflow: auto (避免改变布局结构),而导致下拉框在父元素内部。

    overflow

    总结

    通过上面的方式,有两种方式进行解决

    • 父元素尽可能不使用 margin-top 换为 padding-top
    • 使用 popper-append-to-body 时,父元素不要使用 overflow: auto
    • demo展示

    通过查找element的源码时,发现是其引用 popper.js 的缘故

  • 相关阅读:
    个人项目作业
    自我介绍+软工五问
    Word Count
    个人简介+软工五问
    小学生算术题生成器
    个人项目-WC
    个人简历+软工五问
    学习有感
    学习爱我
    软件工程学习记录
  • 原文地址:https://www.cnblogs.com/sinosaurus/p/11856753.html
Copyright © 2011-2022 走看看