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