在el-dialog里面使用el-select和el-date-picker有时会发生选择下拉框位置错乱,跑到其他地方去了,根据网上搜索的参考内容整理记录一下

一、el-select相关

解决:1、在外部el-dialog或其他div标签添加class

        <el-dialog class="settle-dialog"></el-dialog >

        2、在el-select里面添加:append-to-body="false"属性,如果不添加的话,我们查看元素会发现下拉框所在的div和el-select是不同级的,是在最外面,添加以后就可以在el-select的子级元素中看到了

        <el-select :popper-append-to-body="false"></el-select>

        3、在写有scoped的style标签里修改下拉框的样式

        .settle-dialog ::v-deep .el-select-dropdown {

                  position: absolute !important;

        }

二、el-date-picker相关

解决:1、同上类似 给el-date-picker标签添加属性:append-to-body="false"

        2、在el-date-picker标签添加一个class, popper-class="time-date-picker"

        <el-date-picker  :append-to-body="false" popper-class="time-date-picker"></el-date-picker>

        3、在style里面修改样式

        ::v-deep .time-date-picker {

                  position: absolute !important;

        }

参考地址:el-select下拉框位置错乱(在el-dialog中使用)-CSDN博客

        https://www.cnblogs.com/xb130460/p/14688185.html

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐