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

<template>
	// teleported 属性：是否将下拉列表插入至 body 元素，默认值为 true
	// 将 teleported 属性值设置为 false
	<el-select :teleported="false"" placeholder="Select">
		<el-option v-model="value" v-for="item in options" :key="item.value" :value="item.value" :label="item.label"/>
	</el-select>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
const options = [
  {
    value: '1',
    label: 'Option1',
  },
  {
    value: '2',
    label: 'Option2',
  },
  {
    value: '3',
    label: 'Option3',
  },
  {
    value: '4',
    label: 'Option4',
  },
  {
    value: '5',
    label: 'Option5',
  },
]
</script>

<style scoped>

:deep(.el-select) {
  --el-color-primary: #00812d;
}

:deep(.el-select-dropdown) {
	// 修改当前选中选项的文字显示颜色
	color: #00812d;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47