select选择器中显示对应option的图片，取巧（看了很多太麻烦）

引入elment-ui的js和css、vue的js

下面展示一些 内联代码片。

html

<img :src=imgU alt="" id="selimg">
<el-select v-model="value" placeholder="请选择"  @change="changeClick($event)">
        <el-option
        v-for="item in cities"
        :key="item.label"
        :label="item.label"
        :value="item.value" >
            <img :src="item.url" style="float: left;width: 28px;height: 18px;margin-right: 5px;">
            <span style="float: left; color: #8492a6; font-size: 13px">{{ item.value }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.label }}</span>
        </el-option>
 </el-select>

js

var vmWeather = new Vue({
    el: "#header",
    data() {
      return {
        imgU:'',
        cities: [{
          value: '美国',
          label: '+1',
          url:'icont/unlimited-guoqi5.png'
        }, {
          value: '奥地利',
          label: '+2',
          url:'icont/unlimited-guoqi4.png'
        }, {
          value: '美国',
          label: '+1',
          url:'icont/unlimited-guoqi5.png'
        }, {
          value: '奥地利',
          label: '+2',
          url:'icont/unlimited-guoqi4.png'
        }, {
          value: '美国',
          label: '+1',
          url:'icont/unlimited-guoqi5.png'
        }, {
          value: '奥地利',
          label: '+2',
          url:'icont/unlimited-guoqi4.png'
        },{
          value: '美国',
          label: '+1',
          url:'icont/unlimited-guoqi5.png'
        }, {
          value: '奥地利',
          label: '+2',
          url:'icont/unlimited-guoqi4.png'
        }],
        value: ''
      }
    },
    methods: {
      changeClick(e){
        this.cities.forEach(val => {
          if(val.value==e){
            this.imgU=val.url
          }
        })
      }
    }
  })