elementUI，el-select中el-option中下拉选择图片

elementUI，el-select中el-option中下拉选择图片

效果图

代码

index.vue

<template>
  <el-select :disabled="false" v-model="value" placeholder="请选择" style="width:100%;padding-top:5px" >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
        <span>{{item.label}}</span>
              <img src="https://cn.vuejs.org/images/logo.svg" style="height:32px;float: left;margin-right: 8px;">
        <!-- item.defaultImage为后端返回的在服务器上的图片资源位置 -->
 <!-- <img :src="'http://www.baidu.com' + item.defaultImage" style="height:32px;float: right"> -->
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        // 连锁品牌
        options: [
          { label: '7-ELEVEn', value: 0 },
          { label: '罗森', value: 1 },
          { label: '便利蜂', value:2 },
          { label: '全时', value: 3 },
          { label: '喜士多', value:4 },
          { label: '美宜佳', value:5 }
        ],
        value: ''
      }
    }
  }
</script>