Vue3：修改下拉框el-select的样式

最新推荐文章于 2024-06-12 16:28:15 发布
最新推荐文章于 2024-06-12 16:28:15 发布
阅读量1.4k 收藏 11
点赞数 9
分类专栏： Javascript vue element ui 文章标签： el-select vue3 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/junehhh/article/details/134836550
版权
vue 同时被 3 个专栏收录
39 篇文章 1 订阅
订阅专栏
Javascript
36 篇文章 1 订阅
订阅专栏
element ui
8 篇文章 0 订阅
订阅专栏

问题

在Vue3项目中，使用了elemen-plus的下拉框，但是使用深度修改下拉框的样式（比如下拉框的背景颜色）一直不生效

解决

  • 给下拉框框添加 popper-class属性，属性名根据需求取，比如这里取的是"selectStyle"

在这里插入图片描述

  • 将下拉框的样式单独在写一个style标签（否则没有效果）
    在这里插入图片描述

  • 根据需求对下拉框的样式进行对应的修改就好啦~

其他

参考文章

十八只兔
关注
  • 9
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ElementUI Select选择器下拉框样式修改
丑小鸭变黑天鹅的博客
10-12 7636
工业互联网平台前端代码说明 一、结构说明 build目录 —> 代码最终打包编译生成的文件都放在这个文件夹里 public目录 —> 整个项目的入口index.html和title图标，始终不用动这个文件夹 src目录 —>整个项目的核心代码都在这里 1、api文件夹 —> 请求后台数据的js文件夹，项目已经封装好axios，用的时候直接按照给的示例用就可以了。命名的时候按照规范，最好和你组件名一致。 2、assets文件夹 —>放着一些静态资源文件，如图片
Element-UI下拉框el-select实现拼音搜索
weixin_45753447的博客
03-30 2408
Element-UI el-select实现拼音搜索
Vue3+element PLUS 2.5 中el-select样式修改
先生有火吗
04-16 802
首先是需要在<el-select>标签中添加:teleported="false"属性，表示不将弹出框元素添加到body当中。本人针对网上的一些教程进行了总结，然后自己进行了测试最终修改成功了，把代码发出来供大家参考。针对elementplus中的el-select样式是不是很多小伙伴都感觉难以修改呢？先展示下最终的样式效果（下拉框上面那个菱形我也不知道怎么改，望小伙伴告知）。然后是一系列对下拉框的修改，我就直接贴代码了，方便大家复制粘贴。
简单的vue三级联动下拉框代码
06-11
一款简单的基于vue实现的三级联动下拉框代码，适用于各种三级联动下拉菜单选择功能。
基于vue3+ts实现二次封装element-ui的el-select下拉选项框和el-radio-group单选框
最新发布
shenboyushshh的博客
06-12 660
export const delState = { 1: '正常', 0: '异常' }export const state = { 1: '是', 0: '否' }export const gender = { 1: '男', 2: '女' }export const stateunit = { 0: '冻结', 1: '正常', 2: '到期' }export const fundDirect = { 1: '收入', 2: '支出',}
Vue3之element-plus选择器(el-select)的样式修改【已解决】
xla_java的博客
12-15 7344
Vue3：修改element-plus下拉框el-select的样式。三步走，总有一款适合你。（样式穿透）
vue3手写下拉框
qq_50750390的博客
06-07 546
【代码】vue3手写下拉框。
Vue3 +Element-Plus Select 下拉菜单样式修改
蓝胖子的博客
05-09 1089
Vue3 +Element-Plus Select 下拉菜单样式修改
vue3 级联操作下拉框
susu1083018911的博客
04-30 287
vue3 级联操作下拉框
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件
05-10
"el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件"是一个自定义的前端UI组件，它结合了Element UI库中的el-select和el-tree两个组件的功能，创建了一个适用于数据层级关系展示的选择器。...
el-select 下拉框多选实现全选的实现
10-16
3. 样式定制：可能需要根据实际的UI设计对el-select或el-option进行一些样式定制，以适应全选功能的加入。 在代码实现方面，本文提到的两种方法提供了两种思路。第一种方法更适合对下拉列表的视觉样式有特殊要求的...
vue3+element下拉多选框组件
Aucanon的博客
08-22 719
vue3+element下拉多选框组件
17 Vue3中使用v-model绑定下拉框
Python私教
12-20 1642
使用v-model绑定下拉框也属于非常常见的需求，比如我们需要通过下拉框选择文章的分类，通过下拉框选择员工所属的部门等。这节课我们通过这两个案例来学习一下使用v-model绑定下拉框的基本用法。
vue3简单封装一个下拉框选项组件
weixin_45049852的博客
12-05 1867
vue3简单封装一个下拉框选项组件
Vue 3 下拉菜单组件实现及解析
weixin_44510200的博客
03-21 4911
下拉菜单是一种常见的用户界面元素，在本文中，我们将使用 Vue 3 和 TypeScript 创建一个下拉菜单组件，并深入解析其实现细节。我们将创建一个名为 DropdownMenu 的 Vue 3 组件，它将接受一组选项作为参数，并允许用户通过点击按钮来选择。通过本文，我们了解了如何使用 Vue 3 和 TypeScript 创建一个简单而功能强大的下拉菜单组件。我们深入研究了组件的各个部分，包括模板、脚本和样式，并解释了它们的作用和实现细节。
vue3 + elementPlus实现select下拉框插入确定和取消按钮。
qq_54753561的博客
09-18 4765
vue3 + elementPlus实现select下拉框插入确定和取消按钮。
Vue3 实现下拉选择框多选的功能实现
weixin_44358678的博客
10-17 9794
vue3+ts+element plus 实现下拉选择框的全选组件的封装
Vue使用Element的下拉框Select一些样式的修改
小钻风的博客
08-20 8828
1、选中文字后，下来框的宽度和文字宽度一样 2、去除下拉框的边框 3、更改下拉的图标箭头
vue + element-ui的下拉框el-select获取额外参数
09-05
在Vue中使用Element-UI的下拉框（el-select）组件时，想要获取额外的参数可以通过以下步骤实现： 1. 在下拉框的选项列表（el-select标签、el-option标签）中，可以通过使用自定义属性来保存额外的参数。例如，可以为每个选项设置一个名为"data"的自定义属性来存储额外参数的值。 示例代码： ```html <el-select v-model="selectedValue"> <el-option v-for="item in options" :key="item.value" :data="item.data" :label="item.label" :value="item.value"></el-option> </el-select> ``` 2. 在Vue组件中，可以使用`@change`事件来监听下拉框的选择变化。在事件处理方法中，可以通过`event.target.querySelector('.el-select-dropdown .el-dropdown-menu__item.hover')`来获取当前选中的选项元素。 示例代码： ```javascript methods: { handleSelectChange(event) { const selectedItem = event.target.querySelector('.el-select-dropdown .el-dropdown-menu__item.hover'); const extraParam = selectedItem.getAttribute('data'); // 处理获取到的额外参数 } } ``` 以上就是获取额外参数的简单方法，可以根据实际需求对其中的代码进行扩展和优化。通过这种方式，我们可以在Vue中使用Element-UI的下拉框组件，并且能够获取到额外的参数值以满足业务需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值