【Element】el

2024-07-17 09:35:49| 来源: 网络整理| 查看: 265

一、背景

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

二、功能实现 javascript 复制代码

{{ item.iconDesc }} export default { data() { return { selectedImage: '',//选中的图标 featureCustom2List:[],//表格数据集合，从接口获取的数据 imageList:[],//图标数据集合，从接口获取的数据 }; }, methods: { //监听下拉框 iconChange(e){ //下拉框选中的图标进行赋值 this.selectedImage = e } } }

说明：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、最终效果

**最后：**👏👏 😀😀😀 👍👍

【本文地址】

公司简介

联系我们

今日新闻

点击排行

实验室常用的仪器、试剂和: 说到实验室常用到的东西，主要就分为仪器、试剂和耗

不用再找了，全球10大实验: 01、赛默飞世尔科技（热电）Thermo Fisher Scientif

三代水柜的量产巅峰T-72坦: 作者：寞寒最近，西边闹腾挺大，本来小寞以为忙完这

通风柜跟实验室通风系统有: 说到通风柜跟实验室通风，不少人都纠结二者到底是不

集消毒杀菌、烘干收纳为一: 厨房是家里细菌较多的地方，潮湿的环境、没有完全密

实验室设备之全钢实验台如: 全钢实验台是实验室家具中较为重要的家具之一，很多

图片新闻

实验室药品柜的特性有哪些: 实验室药品柜是实验室家具的重要组成部分之一，主要

小学科学实验中有哪些教学: 计算机计算器一般打孔器打气筒仪器车显微镜

实验室各种仪器原理动图讲: 1.紫外分光光谱UV分析原理：吸收紫外光能量，引起分

高中化学常见仪器及实验装: 1、可加热仪器：2、计量仪器：（1）仪器A的名称：量

微生物操作主要设备和器具: 今天盘点一下微生物操作主要设备和器具，别嫌我啰嗦

浅谈通风柜使用基本常识: 　众所周知，通风柜功能中最主要的就是排气功能。在

【Element】el

【Element】el

今日新闻

点击排行

推荐新闻

图片新闻

专题文章