【Element】el-select下拉框实现选中图标并回显图标

一、背景

需求:在下拉框中选择图标,并同时显示图标和文字,以便用户可以直观地选择所需的图标。

二、功能实现

<template><div><el-table ref="table" :data="featureCustom2List" height="200" border="true"><el-table-column label="图标" prop="prop" width="150" align="center" header-align="center"><div class="iconSelect"><img :src="`/minigram/${selectedImage}`" v-if="selectedImage" alt="Selected Image" width="20" height="20" /><el-select v-model="selectedImage" placeholder="请选择" @change="iconChange" size="mini" style=" width: 100px;margin-left: 10px;"><el-optionv-for="item in imageList":key="item.id":label="item.iconDesc":value="item.iconAddress"><img :src="`/minigram/${item.iconAddress}`"  alt="Selected Image" width="20" height="20"><span style="margin-left: 10px;">{{ item.iconDesc }}</span></el-option></el-select></div></el-table-column></el-table></div>
</template><script>
export default {data() {return {selectedImage: '',//选中的图标featureCustom2List:[],//表格数据集合,从接口获取的数据imageList:[],//图标数据集合,从接口获取的数据};},methods: {//监听下拉框iconChange(e){//下拉框选中的图标进行赋值this.selectedImage = e}}
}
</script>

说明:imageList数组是从接口中获取的,iconDesc表示图标描述,iconAddress表示图标地址👇👇👇

三、下拉框选中图标后无显示

3.1、问题描述

下拉框选中图标后页面没有显示图标,但当手动拖动el-table组件的图标列宽度时,此时图标列的宽度发生了变化,选中的图标就在页面中显示了

3.2、问题分析

这个问题是由于在渲染 el-table 组件时,图标列所在的单元格高度没有被正确计算,导致下拉框和图片无法显示。拖动表格宽度后,单元格高度重新计算,就能正常显示了。

3.3、解决方法

iconChange 方法中手动触发表格重新渲染的操作,让表格重新计算单元格高度,从而使下拉框和图片正常显示。

① 在 data() 中新增一个名为 tableKey 的属性,用于指定表格唯一的 key 值

② 在el-table 组件的 :key 属性上绑定tableKey属性

③ 在 iconChange 方法中,修改 selectedImage 的值后,手动更新 tableKey 的值

总结:这样做的效果是,每次下拉框选中了新的图标时,会手动更新 tableKey 的值,从而触发表格重新渲染,使下拉框和图片正常显示。

3.4、最终效果 

 最后:👏👏 😀😀😀 👍👍 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/577285.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分享71个Java源码总有一个是你想要的

分享71个Java源码总有一个是你想要的 学习知识费力气&#xff0c;收集整理更不易。 知识付费甚欢喜&#xff0c;为咱码农谋福利。 链接&#xff1a;https://pan.baidu.com/s/1frK-W3GT8WrydSlQ-E3o6A?pwd6666 提取码&#xff1a;6666 UI代码 def __init__(self):import …

Text2SQL学习整理(五)将Text-to-SQL任务与基本语言模型结合

导语 上篇博客&#xff1a;Text2SQL学习整理&#xff08;四&#xff09;将预训练语言模型引入WikiSQL任务简要介绍了两个借助预训练语言模型BERT来解决WIkiSQL数据集挑战的方法&#xff1a;SQLOVA和X-SQL模型。其中&#xff0c;借助预训练语言模型的强大表示能力&#xff0c;S…

【Gitlab】CICD流水线自动化部署教程

第一步&#xff0c;准备 GitLab 仓库 这个不用多说&#xff0c;得先保证你的项目已经托管在一个 GitLab 仓库中。 第二步&#xff0c;定义 .gitlab-ci.yml 文件 在你的项目根目录中创建一个 .gitlab-ci.yml 文件。这个文件将定义所有 CI/CD 的工作流程&#xff0c;包括构建、测…

C++中的内存锁定

内存锁定(memory locking)是确保进程保留在主内存中并且免于分页的一种方法。在实时环境中&#xff0c;系统必须能够保证将进程锁定在内存中&#xff0c;以减少数据访问、指令获取、进程之间的缓冲区传递等的延迟。锁定内存中进程的地址空间有助于确保应用程序的响应时间满足实…

OCP NVME SSD规范解读-1

OCP&#xff08;Open Compute Project&#xff09;是一个由Facebook于2011年发起的开源项目。其目标是重新设计和优化数据中心的硬件&#xff0c;包括服务器、存储、网络设备等&#xff0c;以提高效率&#xff0c;降低运营成本&#xff0c;并推动技术的创新和标准化。 在OCP中&…

C++ Qt开发:Charts绘制各类图表详解

Qt 是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本章将重点介绍TreeWidget与QCharts的常用方法及灵活运用。 …

部署谷歌的Gemini大模型

前言 本文将介绍如何使用Docker、Docker-Compose私有化部署谷歌的Gemini大模型&#xff0c;以及没有服务器的情况下如何使用Vercel来部署。 Demo: 使用新加坡云服务器部署&#xff1a;Gemini Pro Chat (snowice.eu.org) 使用Vercel部署&#xff1a;Gemini Pro Chat (snowice.eu…

[足式机器人]Part2 Dr. CAN学习笔记-自动控制原理Ch1-5比例积分控制器Proportional-Intefral Controller

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记-自动控制原理Ch1-5比例积分控制器Proportional-Intefral Controller 消除稳态误差——设计新的控制器

AspectJ入门(一)

AspectJ是一个面向切面的框架&#xff0c;扩展了Java语言。有一个专门的编译器用来生成遵守Java字节编码规范的Class文件。Spring的AOP底层也是用了这个框架。 AOP可以拦截指定的方法并对方法增强&#xff0c;而且无需侵入到业务代码中&#xff0c;使业务与非业务处理逻辑分离…

机器学习之实验过程01

import pandas as pd import numpy as np import matplotlib.pyplot as plt data_path /home/py/Work/labs/data/SD.csv # 请确保您的数据文件路径是正确的 df pd.read_csv(data_path) df.head() # 创建散点图 # 创建散点图 plt.figure(figsize(10, 6)) plt.scatter…

MySQL 数据库系列课程 05:MySQL命令行工具的配置

一、Windows启动命令行工具 &#xff08;1&#xff09;打开 Windows 的开始菜单&#xff0c;找到安装好的 MySQL&#xff0c;点击MySQL 8.0 Command Line Client - Unicode&#xff0c;这个带有 Unicode 的&#xff0c;是支持中文的&#xff0c;允许在命令行中敲中文。 &…

三网合一建设方案

一、什么是三网融合&#xff1f; 三网合一&#xff08;即三网融合&#xff09;&#xff0c;是指电信网、广播电视网和互联网的相互渗透、互相兼容、并逐步整合成为统一的信息通信网络&#xff0c;其中互联网是核心。只需要引入三个网络中的一个&#xff0c;就能实现电视、互联…

Java架构师系统架构需求分析实战

目录 1 导语2 需求分析实战3 核心方法论-架构立方体4 功能性模型-模块定义5 功能性模型-模块关系图6 功能性模型-模块细化 想学习架构师构建流程请跳转&#xff1a;Java架构师系统架构设计 1 导语 架构设计的实战和思维方法的讨论&#xff0c;主要聚焦于需求分析的重要性和方…

openGauss学习笔记-172 openGauss 数据库运维-备份与恢复-导入数据-分析表172.1 分析表172.2 表自动分析

文章目录 openGauss学习笔记-172 openGauss 数据库运维-备份与恢复-导入数据-分析表172.1 分析表172.2 表自动分析 openGauss学习笔记-172 openGauss 数据库运维-备份与恢复-导入数据-分析表 执行计划生成器需要使用表的统计信息&#xff0c;以生成最有效的查询执行计划&#…

c# OpenCvSharp 检测(斑点检测、边缘检测、轮廓检测)(五)

在C#中使用OpenCV进行图像处理时&#xff0c;可以使用不同的算法和函数来实现斑点检测、边缘检测和轮廓检测。 斑点检测边缘检测轮廓检测 一、斑点检测&#xff08;Blob&#xff09; 斑点检测是指在图像中找到明亮或暗的小区域&#xff08;通常表示为斑点&#xff09;&#…

电子科大软件系统架构设计——设计模式

设计模式概述 设计模式的背景 设计面向对象软件比较困难&#xff0c;而设计可以复用的面向对象软件更加困难不是解决任何问题都需要从头做起&#xff0c;最好能复用以往的设计方案经验面向对象软件设计经验需要有一定的模式记录下来&#xff0c;以提供给其他设计者使用&#…

搭建Nginx文件下载站点

一、下载Nginx 首先&#xff0c;确保你的服务器上已经安装了Nginx&#xff0c;使用编译安装&#xff0c;下载最新版Nginx。 wget https://nginx.org/download/nginx-1.25.3.tar.gz tar -xf nginx-1.25.3.tar.gz二、安装Fancyindex和Nginx-Fancyindex-Theme模块 # 下载Fancyin…

如何使用 YOLOv8 做对象检测

介绍 对象检测是一项计算机视觉任务&#xff0c;涉及识别和定位图像或视频中的对象。它是许多应用的重要组成部分&#xff0c;例如自动驾驶汽车、机器人和视频监控。 多年来&#xff0c;已经开发了许多方法和算法来查找图像中的对象及其位置。卷积神经网络对于此类任务有着非…

uni-app 工程目录结构介绍

锋哥原创的uni-app视频教程&#xff1a; 2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中...共计23条视频&#xff0c;包括&#xff1a;第1讲 uni…

[kubernetes]控制平面ETCD

什么是ETCD CoreOS基于Raft开发的分布式key-value存储&#xff0c;可用于服务发现、共享配置以及一致性保障&#xff08;如数据库选主、分布式锁等&#xff09;etcd像是专门为集群环境的服务发现和注册而设计&#xff0c;它提供了数据TTL失效、数据改变监视、多值、目录监听、…