给所有的el-select都添加为popper-append-to-body
时间: 2023-05-08 13:01:12 浏览: 480
将所有的el-select添加为popper-append-to-body可以通过修改全局配置来实现。可以在main.js文件中添加以下代码:
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI, {
popperAppendToBody: true // 添加全局配置popper-append-to-body
});
这将在全局范围内启用popper-append-to-body。它将影响整个应用程序,并将应用于所有使用el-select组件的地方,无需逐个修改每个el-select组件。这是一种高效且方便的方式来实现所需的更改。
注意,为了使此更改生效,您需要确保引入了Vue和ElementUI,并且通过Vue.use()方法将ElementUI注入Vue实例中。
相关问题
el-select使用:popper-append-to-body=false后 下拉列表消失
`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` 的情况下正常显示下拉列表了。
vue2中el-select使用:popper-append-to-body=false后 下拉列表消失
当 `popper-append-to-body` 设置为 `false`时,下拉列表会被插入到 `el-select` 组件的父级元素中。如果下拉列表消失了,可能是由于父级元素的 z-index 值没有设置正确,导致下拉列表被其他元素遮挡。
你可以尝试给 `el-select` 组件的父级元素设置一个较大的 z-index 值,例如:
```css
.parent {
position: relative;
z-index: 999;
}
```
其中 `.parent` 是 `el-select` 组件的父级元素的选择器。
阅读全文