<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>
Element-Plus 修改 el-select 选择器下拉列表中当前选中选项的文字显示颜色
于 2024-03-25 17:14:01 首次发布