vue el-select下拉选择框列表只显示图片，选择图片反显到选择框中

el-select下拉选择框列表只显示图片，选择图片反显到选择框中，直接上代码，效果图在文章末尾

html代码

 <el-form-item label="产品星级">
    <el-select
       clearable
       placeholder="请选择"
       @change="changeStar"
       @clear="productClear"
       v-model="star"
       ref="refSelect">
       <el-option
          v-for="(item, index) in productStarRating"
          :key="index"
          :label="item.label"
          :value="item.value">
            <div>
               <span v-if="index === 0">
                 <img :src="item.url" style="width: 50px; height: 15px;">
               </span>
               <span v-if="index === 1">
                 <img :src="item.url" style="width: 35px; height: 15px;">
               </span>
               <span v-if="index === 2">
                 <img :src="item.url" style="width: 18px; height: 18px;">
               </span>
               <span v-if="index === 3">
                 <img :src="item.url" style="width: 18px; height: 18px;">
               </span>
               <span v-if="index === 4">
                 <img :src="item.url" style="width: 23px; height: 17px;">
               </span>
               <span>{{item.label}}</span>
           </div>
       </el-option>
   </el-select>
</el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

js代码：

 data() {
    return { 
      star:'',
      // 注意图片导入路径，图片自行在iconfont-阿里巴巴图标库中查找
      productStarRating:[
        {url: require('@/assets/img/threeStar.png'),value: '5',label: ''},
        {url: require('@/assets/img/twoStar.png'),value: '4',label: ''},
        {url: require('@/assets/img/oneStarSolid.png'),value: '3',label: ''},
        {url: require('@/assets/img/oneStarHollow.png'),value: '2',label: ''},
        {url: require('@/assets/img/closeEyes.png'),value: '1',label: ''},
      ],
    }
  },

methods: {
    productClear () {
      this.form.star = ''
      this.$refs.refSelect.$el.children[0].children[0].setAttribute('style',"background:url('')");
    },
    changeStar (val) {
      let brand = val
      if (brand === '5') {
        for(let index in this.productStarRating) {
          let aa = this.productStarRating[index];
          let value = aa.value;
          if( brand === value ) {
            this.$refs.refSelect.$el.children[0].children[0].setAttribute('style',"background:url("+ aa.url +") no-repeat 10px;background-size: 50px 15px;padding-left: 70px;");
          }
        }
      } else if (brand === '4') {
        for(let index in this.productStarRating) {
          let aa = this.productStarRating[index];
          let value = aa.value;
          if( brand === value ) {
            this.$refs.refSelect.$el.children[0].children[0].setAttribute('style',"background:url("+ aa.url +") no-repeat 10px;background-size: 35px 15px;padding-left: 55px;");
          }
        }
      } else if (brand === '3' || brand === '2') {
        for(let index in this.productStarRating) {
          let aa = this.productStarRating[index];
          let value = aa.value;
          if( brand === value ) {
            this.$refs.refSelect.$el.children[0].children[0].setAttribute('style',"background:url("+ aa.url +") no-repeat 10px;background-size: 18px 18px;padding-left: 35px;");
          }
        }
      } else if (brand === '1') {
        for(let index in this.productStarRating) {
          let aa = this.productStarRating[index];
          let value = aa.value;
          if( brand === value ) {
            this.$refs.refSelect.$el.children[0].children[0].setAttribute('style',"background:url("+ aa.url +") no-repeat 10px;background-size: 17px 25px;padding-left: 35px;");
          }
        }
      }
    },
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

效果图：