vue.js - vue2.0+Element-ui+select怎么显示图片?

问题描述

问 题

想让select选中的图片显示?

效果

HTML代码
<el-form-item label="头像:">
  <el-select v-model="registerForm.avatar" placeholder="请选择头像">
    <el-option
      v-for="avatar in avatars"
      :key="avatar.Id"
      :label="avatar.src"
      :value="avatar.Id"
    >
      <img class="avatar" :src="avatar.src" style="height:36px">
    </el-option>
  </el-select>
</el-form-item>

数据
avatars: [
          {
            src:"/static/img/img.jpg",
            Id:'0',
          },
          {
            src:"/static/img/img2.jpg",
            Id:'1',
          },
          {
            src:"/static/img/img3.jpg",
            Id:'2',
          },
          {
            src:"/static/img/img4.jpg",
            Id:'3',
          },
          {
            src:"/static/img/img5.jpg",
            Id:'4',
          },
        ],

很明显选择后显示的是选中图片的src,怎么让图片显示在里边呢?
求大神带!!!

解决方案

我这边是实现出来了，但是是拼出来的，

<el-form>

    <el-form-item label="头像:">
     <el-select  v-model="registerForm"  placeholder="请选择头像" @change="changeSelection" ref="select">
       <el-option
        v-for="avatar in avatars"
        :key="avatar.Id"
        :label="avatar.src"
        :value="avatar.Id"
      >
        <img class="avatar" :src="avatar.src" style="height:36px">
      </el-option>
    </el-select>
   </el-form-item>
  </el-form>
  
  methods:{
       changeSelection(){

let path=this.$refs.select.selectedLabel
this.$refs.select.$el.children[0].children[1].setAttribute('style','background:url('+ path +') no-repeat;color:#fff');

},
  
  }

这篇关于vue.js - vue2.0+Element-ui+select怎么显示图片?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！