快捷導(dǎo)航

Element中el-select下拉框?qū)崿F(xiàn)選中圖標(biāo)并回顯圖標(biāo)

更新時(shí)間：2023年12月28日 08:27:18 作者：奔跑的露西

本文主要介紹了Element中el-select下拉框?qū)崿F(xiàn)選中圖標(biāo)并回顯圖標(biāo)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

3.1、問(wèn)題描述
3.2、問(wèn)題分析
3.3、解決方法
① 在 data() 中新增一個(gè)名為 tableKey 的屬性，用于指定表格唯一的 key 值
② 在el-table 組件的 :key 屬性上綁定tableKey屬性
③ 在 iconChange 方法中，修改 selectedImage 的值后，手動(dòng)更新 tableKey 的值
3.4、最終效果

一、背景

需求：在下拉框中選擇圖標(biāo)，并同時(shí)顯示圖標(biāo)和文字，以便用戶可以直觀地選擇所需的圖標(biāo)。

二、功能實(shí)現(xiàn)

<template>
  <div>
    <el-table ref="table" :data="featureCustom2List" height="200" border="true">
      <el-table-column label="圖標(biāo)" 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="請(qǐng)選擇" @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: '',//選中的圖標(biāo)
      featureCustom2List:[],//表格數(shù)據(jù)集合，從接口獲取的數(shù)據(jù)
      imageList:[],//圖標(biāo)數(shù)據(jù)集合，從接口獲取的數(shù)據(jù)
    };
  },
  methods: {
     //監(jiān)聽(tīng)下拉框
     iconChange(e){
      //下拉框選中的圖標(biāo)進(jìn)行賦值
      this.selectedImage = e
    }
  }
}
</script>

說(shuō)明：imageList數(shù)組是從接口中獲取的，iconDesc表示圖標(biāo)描述，iconAddress表示圖標(biāo)地址??????

三、下拉框選中圖標(biāo)后無(wú)顯示

3.1、問(wèn)題描述

下拉框選中圖標(biāo)后頁(yè)面沒(méi)有顯示圖標(biāo)，但當(dāng)手動(dòng)拖動(dòng)el-table組件的圖標(biāo)列寬度時(shí)，此時(shí)圖標(biāo)列的寬度發(fā)生了變化，選中的圖標(biāo)就在頁(yè)面中顯示了

3.2、問(wèn)題分析

這個(gè)問(wèn)題是由于在渲染 el-table 組件時(shí)，圖標(biāo)列所在的單元格高度沒(méi)有被正確計(jì)算，導(dǎo)致下拉框和圖片無(wú)法顯示。拖動(dòng)表格寬度后，單元格高度重新計(jì)算，就能正常顯示了。

3.3、解決方法

在 iconChange 方法中手動(dòng)觸發(fā)表格重新渲染的操作，讓表格重新計(jì)算單元格高度，從而使下拉框和圖片正常顯示。

① 在 data() 中新增一個(gè)名為 tableKey 的屬性，用于指定表格唯一的 key 值

② 在`el-table` 組件的 :key 屬性上綁定tableKey屬性

③ 在 iconChange 方法中，修改 selectedImage 的值后，手動(dòng)更新 tableKey 的值

總結(jié)：這樣做的效果是，每次下拉框選中了新的圖標(biāo)時(shí)，會(huì)手動(dòng)更新 tableKey 的值，從而觸發(fā)表格重新渲染，使下拉框和圖片正常顯示。

3.4、最終效果

到此這篇關(guān)于Element中el-select下拉框?qū)崿F(xiàn)選中圖標(biāo)并回顯圖標(biāo)的文章就介紹到這了,更多相關(guān)Element el-select選中圖標(biāo)并回顯圖標(biāo)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Element中el-select下拉框?qū)崿F(xiàn)選中圖標(biāo)并回顯圖標(biāo)

目錄

一、背景

二、功能實(shí)現(xiàn)