Vue开发遇坑记--select下拉框放图片以及选择后显示图片

需求 下拉框放图片，选择某个图片后 输入框显示选中的图片 ，举例👇

❓ 放入图片选项后 选中的input 一直显示value的值，label绑定的value换成icon的名字 也是字符串，不能作为图片显示出来..

💬换个思路

1. el-select 下el-option中放入图片el-image ，el-image绑定src 此步效果是为了让下拉框显示图片

2. 点击el-select选择了某个选项触发事件change时，让el-select绑定的v-if="selectShow" 为false不显示；且让拿到点击的那项的图片路径给imgBack。

3. el-select 同级放一个div v-else ，此div模拟成输入框的样式 并且动态样式绑定style背景图片，值为imgBack。且绑定一个事件就是再次更新选择的时候触发 ，让selectShow为true 显示原先el-select,且清空el-select选择绑定的值

4. 点击模拟：div隐藏原先el-select显示 后还要再点击一次才有下拉框，所以在div点击事件中 模拟点击

完整代码

    <el-select v-model="imgUrl" size="small" @change=changeStyle(imgUrl) placeholder="请选择"
              :disabled="formData.id" ref="selectedStyle" v-if="selectShow">
              <el-option v-for="item in optionStyle" :key="item.value" :value="item"
                :label="item.ImagePath">
                <el-image :src="item.ImagePath"></el-image>
              </el-option>
            </el-select>

    <div class="WH" :style="{'background':imgBack,'backgroundRepeat':'no-repeat',
 'backgroundSize':'auto 32px'}" v-else @click="imgChange"></div>
              
              
              

   changeStyle (val) {
      this.imgBack = 'url' + '(' + val.ImagePath + ')'
      console.log(this.imgBack);
      this.selectShow = false
    },

    imgChange () {
      this.imgUrl = ""
      this.selectShow = true
      this.$nextTick(() => {
        this.$refs.selectedStyle.$el.click();
      })
      
      
      
      // data中数据
      optionStyle: [{
        value: '红包包',
        ImagePath: require('@/assets/redPacket.png')
      }],
      selectShow: true,
      imgUrl: '',
      imgBack: ''