技術標籤：vuevue

el-select實現下拉圖片，效果如下：

網上大多數的方法都是直接改變背景,通過ref拿到對應元素修改樣式，基本程式碼如下

this.$refs.select[0].$el.children[0].children[0].setAttribute('style','background:url('+ img/.png +') no-repeat;color:#fff;background-position: center center');

這種改法存在問題(對於我的需求來說)，比如說如何還原，新增清空條件怎麼辦，自己試過老是點不到那個清空的圖示，於是放棄了這種方法。

這裡我提供一種新的方法：原理也是修改背景，不過不動選擇框原有的，而是新增一個元素來修改背景，用v-if來控制誰顯示就好了，這裡我用的是<div>，程式碼如下

<el-select v-model="imgUrl" size="mini" placeholder="請選擇" v-if="selectShow" @change="changeSelection">
    <el-option v-for="val in imageList" :key="val.id" :lable="val.ImagePath" :value="val.ImagePath">
        <el-image :src="val.ImagePath"></el-image>
     </el-option>
</el-select>
<div class="WH" :style="{'background':imgBack}" v-else @click="imgChange"></div>
 

思路：選擇一張圖片，讓選擇框selectShow = false，並讓imgBack等於所選擇的圖片(要修改成url(/img.png)的格式)，然後是還原，給div新增一個點選事件把selectShow=true,再把所選擇的清空就好，method方法如下：

changeSelection(val) {
    this.imgBack = 'url' + '(' +val+ ')'
    this.selectShow = false
},
imgChange() {
    this.imgUrl= ""
    this.selectShow = true
},