设置popper-class 无效
时间: 2023-08-07 07:02:33 浏览: 214
如果设置 `popper-class` 属性无效,可能是因为该属性被覆盖了。你可以尝试使用以下两种方法解决:
1. 使用 `scoped` 样式
在你的组件中,可以使用 `scoped` 样式,这样就可以保证你的样式只作用于当前组件,不会被其他样式覆盖。示例如下:
```vue
<template>
<el-select multiple v-model="selectedOptions" popper-class="my-popper">
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
</template>
<style scoped>
.my-popper .el-scrollbar__wrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
```
2. 使用 `!important` 关键字
如果你不想使用 `scoped` 样式,可以在你的样式中添加 `!important` 关键字,这样就可以确保你的样式优先级最高,不会被其他样式覆盖。示例如下:
```vue
<template>
<el-select multiple v-model="selectedOptions" popper-class="my-popper">
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
</template>
<style>
.my-popper .el-scrollbar__wrap {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
</style>
```
上述两种方法都可以解决样式被覆盖的问题,你可以根据具体情况选择使用哪种。
阅读全文