Element中el-select下拉框?qū)崿F(xiàn)選中圖標并回顯圖標
一、背景
需求:在下拉框中選擇圖標,并同時顯示圖標和文字,以便用戶可以直觀地選擇所需的圖標。
二、功能實現(xiàn)
<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:[],//表格數(shù)據(jù)集合,從接口獲取的數(shù)據(jù)
imageList:[],//圖標數(shù)據(jù)集合,從接口獲取的數(shù)據(jù)
};
},
methods: {
//監(jiān)聽下拉框
iconChange(e){
//下拉框選中的圖標進行賦值
this.selectedImage = e
}
}
}
</script>說明:imageList數(shù)組是從接口中獲取的,iconDesc表示圖標描述,iconAddress表示圖標地址??????

三、下拉框選中圖標后無顯示
3.1、問題描述
下拉框選中圖標后頁面沒有顯示圖標,但當手動拖動el-table組件的圖標列寬度時,此時圖標列的寬度發(fā)生了變化,選中的圖標就在頁面中顯示了
3.2、問題分析
這個問題是由于在渲染 el-table 組件時,圖標列所在的單元格高度沒有被正確計算,導致下拉框和圖片無法顯示。拖動表格寬度后,單元格高度重新計算,就能正常顯示了。
3.3、解決方法
在 iconChange 方法中手動觸發(fā)表格重新渲染的操作,讓表格重新計算單元格高度,從而使下拉框和圖片正常顯示。
① 在 data() 中新增一個名為 tableKey 的屬性,用于指定表格唯一的 key 值

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

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

總結(jié):這樣做的效果是,每次下拉框選中了新的圖標時,會手動更新
tableKey的值,從而觸發(fā)表格重新渲染,使下拉框和圖片正常顯示。
3.4、最終效果

到此這篇關(guān)于Element中el-select下拉框?qū)崿F(xiàn)選中圖標并回顯圖標的文章就介紹到這了,更多相關(guān)Element el-select選中圖標并回顯圖標內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- VUE?Element修改el-input和el-select長度的具體步驟
- element?el-select下拉框選擇失效解決辦法
- 基于element-ui中el-select下拉框選項過多的優(yōu)化方案
- vue之elementUi的el-select同時獲取value和label的三種方式
- elementui?el-select?change事件傳參問題
- element中el-select的使用及說明
- elementUI動態(tài)表單?+?el-select?按要求禁用問題
- Vue element-UI el-select循環(huán)選中的問題
- 解決element-ui的el-select選擇器的@blur事件失效的坑
- vue+element開發(fā)使用el-select不能回顯的處理方案
- element修改form的el-input寬度,el-select寬度的方法實現(xiàn)
相關(guān)文章
vue radio單選框,獲取當前項(每一項)的value值操作
這篇文章主要介紹了vue radio單選框,獲取當前項(每一項)的value值操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue.js項目 el-input 組件 監(jiān)聽回車鍵實現(xiàn)搜索功能示例
今天小編就為大家分享一篇vue.js項目 el-input 組件 監(jiān)聽回車鍵實現(xiàn)搜索功能示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
關(guān)于Vue中使用alibaba的iconfont矢量圖標的問題
這篇文章主要介紹了Vue使用alibaba的iconfont矢量圖標的問題,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-12-12
vue?點擊按鈕?路由跳轉(zhuǎn)指定頁面的實現(xiàn)方式
這篇文章主要介紹了vue?點擊按鈕?路由跳轉(zhuǎn)指定頁面的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04
解決vue cli4升級sass-loader(v8)后報錯問題
這篇文章主要介紹了解決vue cli4升級sass-loader(v8)后報錯問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07

