Vue ElementUI el-select自定义图标，左右任意自定义加图标

已于 2024-05-22 11:06:02 修改
阅读量1w 收藏 34
点赞数 6
分类专栏： Vue技术栈 文章标签： vue.js elementui 前端
于 2021-04-29 17:24:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41346436/article/details/116273393
版权
本文介绍如何在Vue.js项目中使用ElementUI的el-select组件进行自定义图标操作，包括在下拉框中左右两侧添加图标。针对公司UI需求，提供了一种简洁的实现方法。
摘要由CSDN通过智能技术生成

本来人家官方的组件我们前端就觉得特好看了，但是每个公司都有特别执拗的UI，硬是要换样式，你只能换了

这个下拉框中左右自定义图标，网上好多案例说的不清楚，且实现起来相当麻烦
看下我的效果图
在这里插入图片描述

上代码，基于Vue项目
    <div class="subjectleft">
              <el-select v-model="value" placeholder="请选择" class="selsectbox">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
               &
了解本专栏 订阅专栏 解锁全文 超级会员免费看
HuiRonmantic
关注
  • 6
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
订阅专栏
Elementui中el-select 选项前添加自定义icon图标
qq_39285178的博客
02-11 2894
Elementui中el-select 选项前添加自定义icon图标
Vue ElementUI el-select 图片选择效果
02-24
基于 Vue2.x，对 ElementUI el-select 做图片选择效果。项目说明可参见：https://blog.csdn.net/sinat_31213021/article/details/129195721
使用el-select插入icon修改样式为自定义选择器
qq_43235503的博客
07-26 193
使用el-select插入icon修改样式为自定义选择器
web前端之vue+element-ui实现el-select选择器标签选项自定义图标、图片回显、setAttribute
我的"CSDN"博客主页地址：https://mengjian.blog.csdn.net/
08-11 4553
web前端之vue+element-ui实现el-select选择器标签选项自定义图标、图片回显、setAttribute
自定义带图标的select，只需把图标地址写在option的title属性中即可
01-31
基于Jquery的自定义下拉框JS插件。 带图标、分组等
ElementUI中select组件中的icon图标自定义
热门推荐
xuefeng11111的博客
10-14 1万+
也是在网上查了很多，但是没有查到什么有用的信息，想要放弃的时候看到了一个国外的人的提问，下方有人回复答案 https://stackoverflow.com/questions/64143585/change-icon-in-of-element-ui-select
el-select 为每一项添加图标
qq_40796623的博客
03-15 1654
效果图
element-plus自定义el-select后缀图标
qq_43651168的博客
05-04 6308
自定义el-select后缀图标
vue3 element-plus自定义el-select后缀图标
lfYexun的博客
01-02 2386
根据element-plus官网中给出的提示，el-select中有个suffix-icon的属性，可以自定义后缀图标，并且传入的类型有string和Component。组件：IconDropDown.vue。2.在需要使用的组件中引入即可。
Elementui中el-select 选项框前添加自定义icon图标
sunnyboysix的博客
01-21 1万+
一 效果图 二 代码 百度很久都没找到类似的说明，自己就尝试一下用class写了 <el-select v-model="value" class="year"> <el-option value="2019" label="2019"></el-option> </el-select> .year { /deep/.el-input__inner { //如果你的style 加了scoped 需要加/deep/
el-select头部添加icon图标
weixin_44099060的博客
06-02 1962
el-select头部添加icon图标
详解element-ui中el-select的默认选择项问题
12-29
直接绑定将option中的value值绑定给v-model <template> <div> <el v-model=query> <el v-for=item key=item.value value=item.value label=item.label></el> </el> </div> </template> [removed] export default{ data() { return { options: [{ value: '01',
自定义select选择框（很漂亮很强大，推荐）
01-21
近日在 GitHub上看到一个很漂亮的select选择框，各种效果很齐全，样式也很漂亮，分享给大家欣赏！
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 6903
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
element-ui二次封装(下拉菜单el-dropdown)
gongliming_qd的博客
01-08 1823
样式效果 效果1 效果2 效果一组件调用 <template> <div> <div v-for="item in tableArr" :key="item"> <Dropdown :propObj="item" @change="menuChange" :selectData="menuSelect.menuSelectData" :buttonIcon="menuSel
vue 可编辑表格，实现 ElementUI 编辑 table，增删改查 Grid，vue编辑 table，elx-table、elx-editable...
chunhuangyin2649的博客
06-06 6890
最新版本见 vue-element-extends （可能这应该是目前最优的一种实现方式了吧） Vue + ElementUI 2.x 实现的可编辑表格组件，支持渲染任意组件、动态列，增删改查等操作； 保持 ElTable 一致的风格，弥补了 ElTable 可编辑表格功能的不足，兼容 ElT...
vue 自定义的通用的表格组件（使用div）
weixin_46328739的博客
12-21 1712
条件渲染使用了 v-if 指令来根据条件判断是否渲染整个表格容器。样式类绑定：样式类绑定使用了 :class 绑定动态的样式类。。使用了 v-for 指令循环渲染表头的每一列。对每一列进行了样式设定，并且设置了点击事件处理函数。使用了 v-for 指令循环渲染表格的每一行和每一列。对每个单元格进行了样式设定，并且设置了点击事件处理函数。在表格右侧实现了固定列的功能，并根据条件判断是否渲染固定列的内容。使用了 @click 绑定点击事件处理函数。
element plus el-select修改后缀图标
最新发布
逆风优雅的博客
08-08 550
使用 element plus 提供的api。使用element plus自带的组件。
el-select自定义样式
08-16
如果你使用的是 Element UI 中的 `el-select` 组件，你可以通过以下方式自定义其样式： 1. 使用 `class` 和 `style` 属性：你可以添加自定义的类名和样式来修改 `el-select` 组件的外观。例如： ```html <el-select class="custom-select" style="width: 200px;"> <!-- 选项 --> </el-select> ``` 然后在 CSS 中定义 `.custom-select` 类的样式。 2. 使用 Element UI 的样式类：Element UI 提供了一些内置的样式类，你可以使用这些类来修改 `el-select` 组件的样式。例如，你可以使用 `size` 属性来设置组件的尺寸，或者使用 `clearable` 属性来添加清空按钮： ```html <el-select size="small" clearable> <!-- 选项 --> </el-select> ``` 3. 使用作用域样式（Scoped Style）：如果你正在使用 Vue 单文件组件，并且在组件中定义了样式，你可以使用作用域样式来修改 `el-select` 组件的样式。例如： ```html <template> <el-select class="custom-select"> <!-- 选项 --> </el-select> </template> <style scoped> .custom-select { /* 自定义样式 */ } </style> ``` 通过上述方法，你可以自定义 `el-select` 组件的外观、尺寸、按钮等样式。希望这些信息能对你有所帮助！如果还有其他问题，请随时提问。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值