vue3里面使用screenfull 不管是element-plus还是antd，select的下拉框不展示，原生的就展示，样式调了半天也没用？

Question

这个是原生

这个是element-plus

              <el-select v-model="state.rudder" filterable  :popper-append-to-body="inScreen"
                    :key="Math.random()">
                    <el-option v-for="item in list" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>

Answer 1

别就给一个 el-select 的部分呀，把 el-dialog 的部分代码也要贴上来哇……

---

猜测是因为现在的浏览器的 <x-select> 组件是 div + position:absolute 模拟的，而不是用的原生 <select> + <option> 的方式让浏览器来定位的。
所以其实应该是打开了，但是因为使用了 screenfull 导致定位错位了，或者直接定位失败了。

但是我自己的项目里面在 el-dialog 上面使用 screenfull，在弹窗内部使用 el-select 并不会出现定位错误的情况，所以还是得提供更多的代码信息才行。
可能是因为你在 el-select 上面使用了 popper-append-to-body 属性导致的？可以考虑先去掉看看。另外我看 Ele+ 的文档，popper-append-to-body 属性已经弃用了，可能改用 teleported 属性会解决问题。

Answer 2

element-plus的select 下拉选项默认是插入到body标签里面的, 与#app是同级, screenfull可能是影响到了:

使用这个属性再试试

而原生的select 下拉选项就在使用位置

element-plus与antd的select并不是原生的select的样式覆盖写的