I want to show an image that must be dynamic inside the tags that are being shown in el-select component on selecting any value from dropdown. I have el-select based on grouped values. I want to show image corrosponding to that group to which tag value belonged.
Something like this - sample image
My current code is in Vue 2 and using element version2
<el-select
:disabled="disabled"
filterable
:allow-create="allowCreate"
:value="localValues"
default-first-option
multiple
placeholder="Select / create variable"
size="large"
:value-key="getValueKeyMapper"
@change="onInputChange"
popper-class="entity-variable-dropdown"
class="entity-variable-select"
ref="customSelect"
>
<el-option-group v-for="group in options" :key="group.key" :label="group.label" class="select-dropdown">
<span class="group-icon" v-if="iconMap[group.key]">
<BaseIcon :name="iconMap[group.key]" width="24" height="24" />
</span>
<el-option v-for="item in group.options" :key="item.viewId" :label="getLabel(item, group.key)" :value="item" class="options" data-search-exclude="true"> </el-option>
</el-option-group>
</el-select>