2020-11-20

问题分析

上图中显示的是当选中el-select的选项时页面的结构，选项的容器并不在挂载的div#app中，而是div#app的兄弟元素，我们在组件中设置样式的时候，加上了scoped，作用域都是局限在div#app中，所以设置的样式就无法正常作用到选项内容的div上。
注：el-select组件中，只有选项的容器默认是div#app之外的，展示的div.el-input还是在div#app之中。
问题解决

Popper-append-to-body属性是Element-UI官方文档中提供的一个属性，该属性的用途就是将el-select选项的内容移动div#app当中，默认值是true，下面一张图是将该属性设置为false时的DOM结构展示。

    <el-select v-model="value" placeholder="请选择" :popper-append-to-body="false">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>

随后在要修改的类名上增加想要的样式就可以啦！