---

效果图

---

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"></el-image>
			<span v-text="item.label"></span>
		</div>
	</el-option>
</el-select>

---

JavaScript

export default {
	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;
				`
			);
		}
	}
};

---

Style

.option_box {
  display: flex;
  align-items: center;
}

.option_img {
  width: 25px;
  height: 25px;
  margin-right: 7px;
}

---

相关链接

Element-ui 自定义下拉框，实现选择图片并且回显图片