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-option
v-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、最终效果

到此这篇关于Element中el-select下拉框实现选中图标并回显图标的文章就介绍到这了,更多相关Element el-select选中图标并回显图标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
- VUE Element修改el-input和el-select长度的具体步骤
- element el-select下拉框选择失效解决办法
- 基于element-ui中el-select下拉框选项过多的优化方案
- vue之elementUi的el-select同时获取value和label的三种方式
- elementui el-select change事件传参问题
- element中el-select的使用及说明
- elementUI动态表单 + el-select 按要求禁用问题
- Vue element-UI el-select循环选中的问题
- 解决element-ui的el-select选择器的@blur事件失效的坑
- vue+element开发使用el-select不能回显的处理方案
- element修改form的el-input宽度,el-select宽度的方法实现
相关文章
vue-echarts高度缩小时autoresize失效的原因和解决办法
Vue-Echarts是一个基于ECharts封装的轻量级、易用的图表组件库,它允许你在Vue.js应用中方便地集成ECharts,这是一个强大而直观的数据可视化库,本文给大家介绍了vue-echarts高度缩小时autoresize失效的原因和解决办法,需要的朋友可以参考下2024-12-12
vue element-ui el-tooltip组件失效问题及解决
这篇文章主要介绍了vue element-ui el-tooltip组件失效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
Vue使用axios post方式将表单中的数据以json格式提交给后端接收操作实例
这篇文章主要介绍了Vue使用axios post方式将表单中的数据以json格式提交给后端接收操作,结合实例形式分析了vue基于axios库post传送表单json格式数据相关操作实现技巧与注意事项,需要的朋友可以参考下2023-06-06


最新评论