【Vue】vue2.0+Element-ui+select怎么显示图片?

Z时代
2024-01-10
分类：技术分享

想让select选中的图片显示?

效果
【Vue】vue2.0+Element-ui+select怎么显示图片?

HTML代码
<el-form-item label="头像:">
<el-select v-model="registerForm.avatar" placeholder="请选择头像">
<el-option
v-for="avatar in avatars"
:key="avatar.Id"
:label="https://segmentfault.com/q/1010000010540165/avatar.src"
:value="avatar.Id"
>
<img class="avatar" :src="https://segmentfault.com/q/1010000010540165/avatar.src">
</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="https://segmentfault.com/q/1010000010540165/avatar.src"
        :value="avatar.Id"
      >
        <img class="avatar" :src="https://segmentfault.com/q/1010000010540165/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');
},
  }