el-select中显示图标/图片设置

Posted 2021-03-20 minutes

<template>
<el-select ref="select_icon" v-model="addModel.icon" @change="iconChange">
                <el-option v-for="(item,index) in iconOptions" :key="index" :label="item.label" :value="item.value">
                  <svg-icon :icon-class="item.label" style="float: left;height:100%;" />
                  <span style="float: right; color: #8492a6;">{{ item.value }}</span>
                </el-option>
</template>

export default {

}

iconChange (val) {
      // el-select实际上是两层div包裹的input
      this.addModel.icon = val;
      // 获取当前el-select标签第一层div
      const dom = this.$refs[‘select_icon‘].$el;
      // 创建需要添加到其中的标签 并填充内容
      const svgDom = document.createElement(‘span‘); // (‘<svg-icon ref="iconRef" icon-class="‘ + val + ‘" style="float: left;width: 3%;height: 30px;border: 1px solid #dcdfe6;border-right:none;" />‘);
      svgDom.setAttribute(‘class‘, ‘el-input__prefix‘);
      svgDom.innerhtml = ‘<span class="el-input__prefix-inner"><i class="el-input__icon el-icon-search is-reverse"></i></span>‘;
      // 将创建的标签添加到父节点(第二层div)
      dom.children[0].appendChild(svgDom);
      // 得到el-select中的input标签
      const inputDom = dom.children[0].children[0];
      inputDom.setAttribute(‘style‘, ‘padding-left: 30px;‘);
      // 将添加的标签放到input前面
      dom.children[0].insertBefore(svgDom, inputDom);
    },