elementUI下拉框图片

1、定义数据

optionsisAgent: [  //事项咨询 群众标识
  {
    id: '1630396469564334081',
    name: '高危',
    url: require('@/assets/err.png')
  },
  {
    id: '1630396631468662786',
    name: '中危',
    url: require('@/assets/war.png')
  },
  {
    id: '1630396694752321538',
    name: '友善',
    url: require('@/assets/scu.png')
  },
]

2、option插入图片，label绑定数据url，并定义方法changeSelection

<el-select v-model="elDialogConfig.isAgent" clearable placeholder="请选择群众标识" @change="changeSelection" ref="select">
  <el-option v-for="item in optionsisAgent" :key="item.id" :label="item.url" :value="item.name">
	<img :src="item.url"/>
	</el-option>
</el-select>

3、通过changeSelection修改选项框内的url

changeSelection(e) {
  for (let index in this.optionsisAgent) {
    let obj = this.optionsisAgent[index];
    console.log(obj, e);
    if (obj.name == e) {
    this.$refs["select"].$el.children[0].children[0].setAttribute("style","background:url(" + obj.url +") no-repeat;color:#fff;text-indent: 9999px;");
    }
  }
}