el-select使用:popper-append-to-body=false后 下拉列表消失
时间: 2023-08-16 16:05:26 浏览: 582
`el-select` 的下拉列表是通过 `el-select-dropdown` 组件来实现的,而 `el-select-dropdown` 中的下拉列表是通过 `el-popper` 组件来实现的。使用 `:popper-append-to-body="false"` 可以控制 `el-popper` 是否将弹出层挂载到 `body` 上,但是要注意的是,如果不挂载到 `body` 上,需要手动设置 `el-popper` 的 `appendTo` 属性来指定挂载的元素。
因此,在使用 `:popper-append-to-body="false"` 的同时,需要设置 `el-popper` 的 `appendTo` 属性,如下所示:
```html
<el-select v-model="value" :popper-append-to-body="false">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
<template slot="dropdown">
<el-popper ref="popper" :appendTo="getPopperAppendTo()">
<el-scrollbar wrap-class="popper-scrollbar">
<el-dropdown-menu>
<el-dropdown-item v-for="item in options" :key="item.value" :value="item.value">
{{ item.label }}
</el-dropdown-item>
</el-dropdown-menu>
</el-scrollbar>
</el-popper>
</template>
</el-select>
```
在 `el-popper` 中添加了 `:appendTo="getPopperAppendTo()"`,并且定义了 `getPopperAppendTo` 方法来返回挂载的元素。
```javascript
methods: {
getPopperAppendTo() {
return this.$refs.popper.$el.parentNode;
}
}
```
这样就可以实现在 `popper-append-to-body` 为 `false` 的情况下正常显示下拉列表了。
阅读全文