el-option 样式

el-option 是 Element UI 中的下拉选项组件，它可以用来在下拉菜单中展示选项项。

要为 el-option 添加样式，可以使用以下方法：

1. 使用 class 属性：el-option 组件提供了一个 class 属性，你可以通过该属性为选项添加自定义的 CSS 类。例如，你可以给特定的选项项添加一个类名，并在 CSS 中定义该类的样式。示例代码如下：

<el-select>
  <el-option class="custom-option" value="1">Option 1</el-option>
  <el-option class="custom-option" value="2">Option 2</el-option>
  <el-option class="custom-option" value="3">Option 3</el-option>
</el-select>

.custom-option {
  color: red;
  font-weight: bold;
}

2. 使用 slot-scope：el-option 还提供了一个 slot-scope 属性，可以用于自定义选项的内容和样式。你可以在 el-option 内部使用 slot-scope 来访问选项的值，并根据需要添加样式。示例代码如下：

<el-select>
  <el-option value="1">
    <template slot-scope="{ option }">
      <span :class="[option.value === '1' ? 'custom-option' : '']">{{ option.label }}</span>
    </template>
  </el-option>
  <el-option value="2">
    <template slot-scope="{ option }">
      <span :class="[option.value === '2' ? 'custom-option' : '']">{{ option.label }}</span>
    </template>
  </el-option>
  <el-option value="3">
    <template slot-scope="{ option }">
      <span :class="[option.value === '3' ? 'custom-option' : '']">{{ option.label }}</span>
    </template>
  </el-option>
</el-select>

.custom-option {
  color: red;
  font-weight: bold;
}

以上是两种常用的为 el-option 添加样式的方法。你可以根据自己的需求选择其中一种或结合使用。