Element-Plus 修改 el-select 选择器下拉列表中当前选中选项的文字显示颜色

在 Element-Plus 中，要修改 el-select 选择器下拉列表当前选中项的文字颜色，可以通过覆盖 CSS 样式来实现。以下是一个简单的例子，展示如何通过自定义类名来修改选中选项的文字颜色。

首先，定义一个自定义类名，比如叫 .custom-select-option-color，然后在你的 CSS 文件中添加相应的样式规则。

CSS 文件:

.custom-select-option-color .el-select-dropdown__item.selected {
  color: #ff0000; /* 修改为你想要的颜色 */
}

接下来，在你的 el-select 组件上应用这个自定义类名：

Vue 组件:

<template>
  <el-select class="custom-select-option-color" v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      value: '',
      options: [{ value: '1', label: '选项1' }, { value: '2', label: '选项2' }]
    };
  }
};
</script>

确保你的 CSS 样式能够被正确加载，这样当你选择了 el-select 中的一个选项后，选中项的文字颜色将会变成你在 CSS 中定义的颜色。