vue+elementUi实现select标签选项带图片，且选中回显图片

原文-博客园

1、html

<el-select style="width: 100%" v-model="form.iconFilepath" placeholder="请选择图标" @change="changeSelection" ref="refSelect" > <el-option v-for="item in optionsImg" :key="item.id" :value="item.label" > <div class="option_box"> <el-image class="option_img" :src="item.valueImg"> methods: { // select标签的change事件 changeSelection(val) { let optionsImg = this.optionsImg, i = optionsImg.findIndex((item) => item.label == val); this.$refs["refSelect"] .$el.children[0] .children[0] .setAttribute( "style", ` background: url(${optionsImg[i].valueImg}) no-repeat; 
				background-position: 10px center; 
				background-size: 20px 20px; 
				text-indent: 30px; ` ); } } }; 

3、css

.option_box { display: flex; align-items: center; } .option_img { width: 25px; height: 25px; margin-right: 7px; } 

4、效果