目录

前言

一、ElementUI文档

二、代码实现

1.el-select选择器

2.设置样式

拓展阅读

---

前言

在开发中有时需要给某些下拉框选项设置特定的样式，如字体大小，字体颜色，间距等。

---

一、ElementUI文档

为了实现给特定下拉框设置样式的效果，需要关注el-select中的两个参数：popper-class和popper-append-to-body，可以设置下拉框的类名，即popper-class，并将popper-append-to-body设置为false，否则的话渲染后的 DOM 元素将不在 #app 元素内部。

二、代码实现

1.el-select选择器

代码如下（示例）：

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

2.设置样式

代码如下（设置字体大小）：

<style>
  .labelOption .el-select-dropdown__item {
    font-size: 10px;
  }
</style>

---

拓展阅读

ElementUI文档：Element - The world's most popular Vue UI framework