vue-multiselect Custom option template自定义下拉选项模板

vue-multiselect 自定义下拉选项模板，比如下拉选择国家时下拉选项中显示国旗，下拉选择用户时显示用户的头像。

关键属性

完整代码

<template>
 <div style="width:50%;margin-left: 10px;">
  <multiselect v-model="value" placeholder="请选择相应的网站" label="title" track-by="title" 
  :options="options" 
  :option-height="104"   
  :custom-label="customLabel" 
  :show-labels="false"
   selectLabel="回车选择"
   selectGroupLabel="回车选择整个分组"
   selectedLabel="已选择"
   deselectLabel="回车取消选择"
   deselectGroupLabel="回车取消选择"  
  >
    <template slot="singleLabel" slot-scope="props">
    <img class="image" :src="props.option.img"  >
    <span class="desc"><span class="title">
    {{ props.option.title }} 
    </span></span>
    </template>
    <template slot="option" slot-scope="props">
      <img class="image" :src="props.option.img" >
      <div class="desc">
      <span class="title">{{ props.option.desc }}</span>
      <span class="small">{{ props.option.title}}</span>
      </div>
    </template>
  </multiselect>
  <pre  ><code>{{ value  }}</code></pre>
</div>
</template>
<style scoped>
.image{
  width: 50px;
  height: 50px;
  display: inline-block;
  border: solid 1px #ddd;
  padding: 5px;
  border-radius:5px ;
}
.desc{
  display: inline-block;
  margin-left: 10px;
}
.title,.small{
  display:block;
}
</style>
 <script> 
import Vue from 'vue'
//导入Multiselect
import Multiselect from 'vue-multiselect';
import 'vue-multiselect/dist/vue-multiselect.min.css';
//注册multiselect组件
Vue.component('multiselect', Multiselect)

export default {
  components: {
    Multiselect
  },
  data () {
    return {
      value: { title: 'www.taobao.com', desc: '淘宝网', img: 'https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png' },
      options: [
       { title: 'www.taobao.com', desc: '淘宝网', img: 'https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png' },
        { title: 'www.jd.com', desc: '京东网', img: 'https://img10.360buyimg.com/img/jfs/t1/117726/20/7368/88789/5ec3777cE70ffaf64/47d8f5d0310958bd.gif' },
        { title: 'www.itxst.com', desc: 'IT小书童', img: 'https://www.itxst.com/img/logo.png' },
        { title: 'www.qq.com', desc: '腾讯网', img: 'https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png' }
      ]
    }
  },
  methods: {
    customLabel ({ title, desc }) {
      return `${title} – ${desc}`
    }
  }
}
</script>

例子