码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-12-24 13:40:59      阅读:588      评论:0      收藏:0      [点我收藏+]

标签:val   add   select   htm   export   reverse   element   border   key   

<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);
    },

 

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

标签:val   add   select   htm   export   reverse   element   border   key   

原文地址:https://www.cnblogs.com/minutes/p/12090679.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!