修改el-select样式有两种方式：index.html或者popper-append-to-body加上popper-class

问题描述饿了吗？UI内置的样式一般都够用了，但是有时候我们需要修改样式，让它更漂亮，本文记录修改el-select样式的方法，记录一下，回头看看问题当你忘记它时。下拉框可以分为两部分，一个是'box'部分，另一个是'drop-down'部分，通常我们修改下拉框的样式，无非就是修改这两个部分，如下图修改框的宽度，最简单的方法是在el-select中添加样式并设置，注意直接使用样式设置高度是不会生效的。当然一般不需要设置高度，因为高度是自适应的，会被内容扩展。高度的代码如下效果图如下，确实加宽了，修改了下拉的样式。方法一（在index.html中全局修改）从上图我们可以看出，下拉框的样式并没有在el-select的DOM中，而是放在了最外层。这个最外层和挂载的#App是兄弟元素，所以我们需要在vue项目的入口文件中添加修改index.html中的样式，代码如下favicon.ico">效果图如下，但是修改index.html文件中的样式会造成全局样式污染。假设我只想对这个页面的下拉框下拉框??的样式进行修改，不修改其他页面下拉框的样式。这种方法显然不好。当然，如果所有的下拉框都统一修改，这个方法还是比较不错的。先说第一种方式，第二种方式是使用饿了么UI提供的el-select属性popper-append-to-body属性。官方介绍如下：显然，饿了么官方默认将下拉部分添加到。所以我们可以通过这个属性让它不添加到body中，让它返回对应的el-select，也就是把下拉部分放回对应的结构中方法2使用popper-append-to-body修改查看DOM元素结构既然加入了el-select，我们就可以使用css选择器找到对应的level来设置对应的样式，依然可以实现上图的效果.el-select{.el-select-dropdown{.el-scrollbar{.el-select-dropdown__wrap{.el-scrollbar__view{.el-select-dropdown__item:hover{背景颜色：#baf;}}}}}}有网友说popper-append-to-body要和popper-class一起使用。其实也不一定需要一起使用。只要在el-select结构中加入相应的元素，就可以直接修改相应的样式。poper-class的用法是这样使用的：popper-class是select下拉框的类名，如果一起使用，css代码会少写