在el-dailog里面使用el-select和el-date-picker位置错乱问题

在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