标签：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>
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); },
标签：val add select htm export reverse element border key
原文地址：https://www.cnblogs.com/minutes/p/12090679.html
