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>
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Element Plus,select组件可以用来实现下选择功能。根据提供的引用和引用,下面是使用Element Plus的select组件实现下选择的基本步骤和常用方法: 1. 首先,在模板使用`<el-select>`标签来创建一个select组件,设置`v-model`绑定的值和占位符等属性。例如: ```html <template> <el-select v-model="value" class="m-2" placeholder="Select" size="large"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </template> ``` 2. 在脚本,使用`import`语句引入`ref`函数,并创建一个`value`的响应式数据,用来存储选择的值。还需要创建一个`options`数组,用来存储下选项的数据。例如: ```html <script lang="ts" setup> import { ref } from 'vue' const value = ref('') const options = [ { value: 'Option1', label: 'Option1' }, { value: 'Option2', label: 'Option2' }, { value: 'Option3', label: 'Option3' }, { value: 'Option4', label: 'Option4' }, { value: 'Option5', label: 'Option5' } ] </script> ``` 以上就是使用Element Plus的select组件实现下选择的基本步骤和常用方法。可以根据具体需求进一步进行样式和功能的定制。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [element Plus Select选择实现查询搜索 下选择](https://blog.csdn.net/weixin_52703987/article/details/131529690)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [详解为element-ui的Select和Cascader添加弹层底部操作按钮](https://download.csdn.net/download/weixin_38544781/12928496)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值