el-select下拉框label使用图片

1、需求：下拉选项显示图片+文字，选中后显示图片 2、HTML代码

  
     {{ item.text }}
  

3、JS代码

        修改选中项的样式

emoList:[ {id: ``, src: ``, text: `` } ]  // 定义下拉框数据

changeSelection (val) {
    for (let index in this.emoList) {
        let obj = this.emoList[index]
        if (obj.text == val) {
          this.$refs['select'].$el.children[0].children[0].setAttribute(
            'style',
            `background: url(${obj.src}) no-repeat; 
            width: 25px; height: 25px;
            border: none;
            background-position: 80% center;
            background-size:43%`
          )
        }
    }
}

4、css代码

.el-select .el-input--suffix .el-input__suffix{
    right: 0;
    i {
        padding-left: 0;
      }
}

5、效果图：

参考链接：vue+elementUi实现select标签选项带图片，且选中回显图片_web半晨的博客-CSDN博客_el-select 显示图片