当前位置: 首页 > news >正文

select选择框里填充图片,下拉选项带图片

遇到一个需求,选择下拉框选取图标,填充到框里

1、效果展示

在这里插入图片描述

2、代码

  <el-form-item label="工种图标" class="Form_icon Form_label"><el-select ref="select" :value="formLabelAlign.icon" placeholder="请选择":popper-append-to-body="false" @change="changIcon"><el-option v-for="item in icons" :key="item.value" :value="item.value"><div class="Form_label_select"><img :src="item.icon" class="Form_label_img"></div></el-option></el-select></el-form-item>

先在mounted给下拉框添加一个img标签

     mounted() {const newLi = document.createElement("img");this.$refs['select'].$el.children[0].appendChild(newLi);},

选取图标的时候更改img样式

          changIcon(val) {let item = this.icons.filter((item) => { return item.value == val })let img = this.$refs['select'].$el.children[0].children[2];//该select数下来第三个子节点img.setAttribute('src', item[0].icon)//也可以写在下一步,item[0].icon得用${}括起来img.setAttribute('style', `width: 35px;height:95%;position:absolute;left:0;background:white;`)this.formLabelAlign.icon = val},

注意:图片路径的引入得用import,否则找不到,无法显示

   import icon1 from '@/assets/aaa/icon1.png';import icon2 from '@/assets/aaa/icon2.png';import icon3 from '@/assets/aaa/icon3.png';icons: [{ value: '1', icon: icon1, checked: false }, { value: '2', icon: icon2, checked: false }, { value: '3', icon: icon3, checked: false },]
   ::v-deep .Form_icon.el-select {display: inline-block;position: relative;width: 100%;border: 1px solid #DCDFE6;border-radius: 4px;padding: 2px 0 2px 12px;box-sizing: border-box;}::v-deep .Form_icon.el-popper[x-placement^=bottom] {margin-left: -10px;}::v-deep .Form_icon.el-input__inner {border: none;padding-left: 0;}

相关文章:

select选择框里填充图片,下拉选项带图片

遇到一个需求&#xff0c;选择下拉框选取图标&#xff0c;填充到框里 1、效果展示 2、代码 <el-form-item label"工种图标" class"Form_icon Form_label"><el-select ref"select" :value"formLabelAlign.icon" placeholder&…...

轨道交通数字孪生可视化平台,助力城市交通运营智慧化

随着经济和科技的快速发展&#xff0c;轨道交通运营管理在日常操作者面临各种挑战。数字孪生技术被认为是未来轨道交通运营管理的重要手段之一。它可以提高轨道交通的运营效率和安全性&#xff0c;助力城市交通运营智慧化。以城市轨道交通运维管理业务需求为导向,从数据感知、融…...

【每日OJ —— 101. 对称二叉树】

每日OJ —— 101. 对称二叉树 1.题目&#xff1a;101. 对称二叉树2.解法2.1.算法讲解2.2.代码实现2.3.提交通过展示 1.题目&#xff1a;101. 对称二叉树 2.解法 2.1.算法讲解 1.该题是判断二叉树是否对称&#xff0c;关键在于&#xff0c;左子树等于右子树&#xff0c;而所给的…...

善网商城上线洁柔产品 公益人专享爱心价官方正品

近日&#xff0c;中国善网慈善商城&#xff08;以下简称善网商城&#xff09;系统经升级后重新上线。目前善网商城线上销售的中顺洁柔旗下慈善产品已顺利获得中顺洁柔纸业股份有限公司授权&#xff0c;双方就合作事宜达成共识&#xff0c;并于近日签订线上经营授权书。 &#x…...

禁止谷歌浏览器自动更新

禁止谷歌浏览器自动更新 在使用Python包selenium的时候浏览器版版本发生变化后产生很多问题如&#xff1a; 1、直接版本不对应无法运行 2、版本不一致导致debug启动浏览器超级慢 这里是已谷歌浏览器为代表的。 禁止自动更新的方法如下&#xff1a; 1、WinR调出运行&#x…...

Oracle存储过程返回DataSet(多个DataTable)给C#

一、存储过程 CREATE OR REPLACE PROCEDURE GET_SENDEXCEL_XY ( ZGJ182X OUT SYS_REFCURSOR , ZGJ182Y OUT SYS_REFCURSOR , ZXN182X OUT SYS_REFCURSOR , ZXN182Y OUT SYS_REFCURSOR , ZLH182X OUT SYS_REFCURSOR …...

如何往excel中写子表?

with pd.ExcelWriter("C:/last_date.xlsx") as writer:for i in range(0, 10):df pd.DataFrame()df.to_excel(writer, indexFalse, sheet_namestr(days[i 1]))...

Flutter 控件查阅清单

为了方便记录和使用Flutter中的各种控件&#xff0c;特写此博客以记之&#xff0c;好记性不如烂笔头嘛&#xff1a;&#xff09; 通过控件的首字母进行查找&#xff0c;本文会持续更新 控件目录 AAppBar BCContainerColumn &#xff08;列&#xff09; DDivider (分割线) EElev…...

【高效开发工具系列】gson入门使用

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

Python中的缺失值

Python中的缺失值 1、情景描述2、Python中的缺失值 1、情景描述 在使用Pandas中的文件读取API读取Excel、CSV或TXT等文件时&#xff0c;我们可能需要对读取到的数据进行简单清洗。例如&#xff0c;将其中的表示空值的字符串替换为真正意义上的缺失值 来看一个例子&#xff1a;…...

JVM 字节码

JVM概述 问题引出 你是否也遇到过这些问题&#xff1f; 运行着的线上系统突然卡死&#xff0c;系统无法访问&#xff0c;甚至直接OOM&#xff01;想解决线上JVM GC问题&#xff0c;但却无从下手。新项目上线&#xff0c;对各种JVM参数设置一脸茫然&#xff0c;直接默认吧&…...

ComfiUI API调用随记

来进行知识接力了&#xff1a; 首先了解下ComfiUI的APIstable diffusion comfyui的api使用教程-CSDN博客 对于ComfiUI&#xff0c;接口比较简单。查询接口比较容易看明白。 对于发起prompt的请求&#xff0c;如果需要图片的&#xff0c;则需预先上传图片给ComfiUI&#xff0c…...

Dockerfile讲解

Dockerfile 1. 构建过程解析2. Dockerfile常用保留字指令3. 案例3.1. 自定义镜像mycentosjava83.2. 虚悬镜像 4. Docker微服务实战 dockerfile是用来构建docker镜像的文本文件&#xff0c;是由一条条构建镜像所需的指令和参数构成的脚本。 dockerfile定义了进程需要的一切东西&…...

Ansible及其优势是什么?

Ansible是一款极其简单的开源的自动化运维工具&#xff0c;基于Python开发&#xff0c;集合了众多运维工具(puppet, cfengine, chef, func, fabric)的优点。实现了批量系统配置&#xff0c;批量程序部署&#xff0c;批量运行命令等功能。同时Ansible是基于模块工作&#xff0c;…...

使用群晖Docker搭建HomeAssistant并实现异地公网访问家中智能设备

最近&#xff0c;我发现了一个超级强大的人工智能学习网站。它以通俗易懂的方式呈现复杂的概念&#xff0c;而且内容风趣幽默。我觉得它对大家可能会有所帮助&#xff0c;所以我在此分享。点击这里跳转到网站。 使用群晖Docker搭建HomeAssistant并实现异地公网访问 文章目录 使…...

重塑生成式AI时代数据战略,亚马逊云科技re:Invent大会Swami主题演讲

re:lnvent 2023 Swami Sivasubramanian主题演讲&#xff0c;数据、AI和人类共进共生&#xff0c;重塑生成式AI时代的数据战略。 赋能人才加持生成式AI必备能 生成式AI创新中心&#xff1a;解决生成式AI工程化挑战。 Amazon Bedrock平台PartyRock&#xff1a;生成式AI应用程序实…...

【恋上数据结构】哈夫曼树学习笔记

哈夫曼树 哈夫曼编码&#xff08;Huffman Coding&#xff09; 哈夫曼编码&#xff0c;又称为霍夫曼编码&#xff0c;它是现代压缩算法的基础 假设要把字符串 [ABBBCCCCCCCCDDDDDDEE] 转成二进制编码进行传输。 可以转成 ASCII 编码 (6569&#xff0c;10000011000101) &…...

前端下拉框select标签的插件——select2.js

本文采用的是select2 版本&#xff1a;Select2 4.0.6-rc.1。 可以兼容IE8及以上。亲测过。 官网&#xff1a;Getting Started | Select2 - The jQuery replacement for select boxes 一、认识select2.js 1、使用插件&#xff0c;首先要引入别人的插件了&#xff0c;你可以选…...

【MySQL的基本命令{DML 和 DDL}】

MySQL的基本命令 {DML 和 DDL} MySQL的基本命令展示所有数据库展示某个数据库中所有的表切换到某个数据库查看当前在哪个数据库查询一张表的全部数据新建一个数据库新建一张表插入一条数据删除一个表删除一个库描述表的信息展示表的创建sql代码展示库的创建sql代码导出数据 &am…...

unity3d模型中缺失animation

在 模型的Rig-Animationtype 设置成Legacy https://tieba.baidu.com/p/2293580178...

5个技巧让Elixir调试效率提升10倍:dbg函数输出优化指南

5个技巧让Elixir调试效率提升10倍&#xff1a;dbg函数输出优化指南 【免费下载链接】elixir Elixir 是一种用于构建可扩展且易于维护的应用程序的动态函数式编程语言。 项目地址: https://gitcode.com/GitHub_Trending/el/elixir Elixir是一种用于构建可扩展且易于维护的…...

qart.js 性能优化:大型图片处理与版本自动适配技巧

qart.js 性能优化&#xff1a;大型图片处理与版本自动适配技巧 【免费下载链接】qart.js Generate artistic QR code. &#x1f3a8; 项目地址: https://gitcode.com/gh_mirrors/qa/qart.js qart.js 是一款强大的艺术二维码生成工具&#xff0c;能够将普通二维码与图片融…...

Harness Engineering: 为 AI 搭建可持续迭代环境的实践

在公司内部一个 AIGC页面 Verify 项目(下面代号 HelixVerify )中,我们经历了 114 次版本迭代, 将相对benchmark 的风险样本召回率从 最初的 8% 提升至 98.86%,无风险样本通过率从 36.11% 提升至 54.93%。 **整个 114 次迭代中,基本没有代码是我手写的。**从第一个版本开始,所有…...

基于Matlab的IMU姿态解算之旅:四元数姿态的奇妙融合

基于matlab的IMU姿态解算,姿态类型为四元数&#xff1b;角速度和线加速度的类型为三维向量。 IMU全称是惯性导航系统&#xff0c;主要元件有陀螺仪、加速度计和磁力计。 其中陀螺仪可以得到各个轴的加速度&#xff0c;而加速度计能得到x&#xff0c;y&#xff0c;z方向的加速度…...

别再搞混了!CTP API生产版、评测版和SimNow环境,新手避坑指南(附最新v6.7.9配置)

CTP API版本选择与SimNow环境实战指南&#xff1a;从配置误区到高效开发 第一次打开CTP官方文档时&#xff0c;那些密密麻麻的版本号和晦涩的参数说明是否让你感到窒息&#xff1f;作为量化交易的基础设施&#xff0c;CTP API的版本选择和环境配置直接决定了开发效率甚至实盘稳…...

抖音批量下载终极指南:5分钟掌握免费视频资源整合技巧

抖音批量下载终极指南&#xff1a;5分钟掌握免费视频资源整合技巧 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 你是不是经常看到精彩的抖音视频想保存下来&#xff0c;却苦于一个个手动下载太麻烦&#x…...

基于PHP、asp.net、java、Springboot、SSM、vue3的高校自动排课系统的设计与实现

目录 可选框架 可选语言 内容 可选框架 J2EE、MVC、vue3、spring、springmvc、mybatis、SSH、SpringBoot、SSM、django 可选语言 java、web、PHP、asp.net、javaweb、C#、python、 HTML5、jsp、ajax、vue3 内容 李哥讲程序开发666。 修改个人信息、自动排课等功能&…...

BGV vs BFV:基于LWE的两大全同态加密方案,到底该怎么选?

BGV vs BFV&#xff1a;基于LWE的两大全同态加密方案技术选型指南 当隐私计算项目需要处理加密数据上的复杂运算时&#xff0c;全同态加密&#xff08;FHE&#xff09;方案的选择往往成为架构设计的核心决策点。作为第二代FHE方案的典型代表&#xff0c;BGV和BFV虽然同属基于L…...

Phi-4-Reasoning-Vision行业应用:制造业设备巡检图故障推理与维修建议生成

Phi-4-Reasoning-Vision行业应用&#xff1a;制造业设备巡检图故障推理与维修建议生成 1. 技术背景与价值 在制造业设备维护领域&#xff0c;传统的人工巡检方式存在效率低、主观性强、经验依赖严重等问题。Phi-4-Reasoning-Vision多模态大模型为这一场景带来了革命性的解决方…...

OpenClaw浏览器自动化实战:百川2-13B驱动的智能信息检索系统

OpenClaw浏览器自动化实战&#xff1a;百川2-13B驱动的智能信息检索系统 1. 为什么需要自动化信息检索 作为一名技术研究者&#xff0c;我每天需要跟踪大量行业动态和论文进展。传统的手动搜索-阅读-摘录流程效率极低&#xff0c;经常出现以下痛点&#xff1a; 重复劳动&…...