Any way to append image/icon before text inside el-tag element inside el-select component

56 Views Asked by At

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>
0

There are 0 best solutions below