如何修改elementUI提供的el-select组件的样式-select组件popper-class用法

最新推荐文章于 2024-08-13 16:08:23 发布

张凡的博客

最新推荐文章于 2024-08-13 16:08:23 发布

阅读量2.3k

点赞数

分类专栏：前端技术文章标签： vue.js elementui

本文链接：https://blog.csdn.net/weixin_38761920/article/details/118392420

版权

本文介绍了如何通过elementUI的`popper-class`属性修改`el-select`组件的样式。当`popper-append-to-body`设为`false`时，下拉框将回到`el-select`结构内，便于使用CSS选择器定制样式。方法二是利用`popper-class`指定类名，简化CSS代码，实现自定义效果。

摘要由CSDN通过智能技术生成

官网提供的：
在这里插入图片描述
下拉框的样式，它并没有在el-select里面，而是放在了最外层，如下图：
popper-append-to-body：默认是true，改成false就可以起作用。显而易见，官方默认把下拉部分加入到里，所以我们可以通过popper-append-to-body这个属性使其不加到body里，让其回归到对应el-select里面，就是把下拉部分，放回对应结构中去。
在这里插入图片描述
既然加入到el-select里面了，我们就可以使用css选择器找到对应层级去设置对应样式了，依然可以实现上图中的效果

方法二：

使用popper-class=“xxx”,其方法是同样是将对应元素加入到el-select结构中去，然后就可以直接修改对应样式了
用法如下：

<el-select v-model="xxx"  popper-class="project-select">
      <el-option :label="xxx" :value="0"></el-option>
      <el-option :label="xxx" :value="1"></el-option>
</el-select>