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

 更新时间:2023年12月28日 08:27:18   作者:奔跑的露西  
本文主要介绍了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-echarts高度缩小时autoresize失效的原因和解决办法

    vue-echarts高度缩小时autoresize失效的原因和解决办法

    Vue-Echarts是一个基于ECharts封装的轻量级、易用的图表组件库,它允许你在Vue.js应用中方便地集成ECharts,这是一个强大而直观的数据可视化库,本文给大家介绍了vue-echarts高度缩小时autoresize失效的原因和解决办法,需要的朋友可以参考下
    2024-12-12
  • Vue新的状态管理库Pinia入门教程

    Vue新的状态管理库Pinia入门教程

    Pinia不但支持Vue3,同时还支持Vue2,本文主要介绍了Vue新的状态管理库Pinia入门教程,具有一定的参考价值,感兴趣的可以了解下
    2022-02-02
  • 使用vue.js制作分页组件

    使用vue.js制作分页组件

    本文给大家分享的是个人在使用vue.js制作的文章和评论的分页组件,并使用webpack打包起来,这里推荐给大家,有需要的小伙伴可以参考下
    2016-06-06
  • vite如何实现构建vue3新项目

    vite如何实现构建vue3新项目

    这篇文章主要介绍了vite如何实现构建vue3新项目方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-05-05
  • LogicFlow内置菜单插件实例详解

    LogicFlow内置菜单插件实例详解

    这篇文章主要为大家介绍了LogicFlow内置菜单插件实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 快速解决vue-cli在ie9+中无效的问题

    快速解决vue-cli在ie9+中无效的问题

    今天小编就为大家分享一篇快速解决vue-cli在ie9+中无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue 如何设置背景颜色及透明度

    vue 如何设置背景颜色及透明度

    这篇文章主要介绍了vue 设置背景颜色及透明度的操作,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-06-06
  • vue element-ui el-tooltip组件失效问题及解决

    vue element-ui el-tooltip组件失效问题及解决

    这篇文章主要介绍了vue element-ui el-tooltip组件失效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 详解vue2与vue3获取模版引用ref的区别

    详解vue2与vue3获取模版引用ref的区别

    这篇文章主要为大家详细介绍了vue2与vue3中获取模版引用ref的方法与区别,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-10-10
  • Vue使用axios post方式将表单中的数据以json格式提交给后端接收操作实例

    Vue使用axios post方式将表单中的数据以json格式提交给后端接收操作实例

    这篇文章主要介绍了Vue使用axios post方式将表单中的数据以json格式提交给后端接收操作,结合实例形式分析了vue基于axios库post传送表单json格式数据相关操作实现技巧与注意事项,需要的朋友可以参考下
    2023-06-06

最新评论