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

蒜苗儿回锅肉

已于 2024-03-26 17:55:48 修改

阅读量2.2k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Element-Plus 文章标签：前端 elementui

于 2024-03-25 17:14:01 首次发布

本文链接：https://blog.csdn.net/timzhangt/article/details/137018918

Element-Plus 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用`teleported`属性控制el-select组件的插入位置，并展示了如何自定义下拉列表的样式，如文字颜色和选中项颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>