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

Posted 2021-09-05 web半晨

目录

• • 1、html
  • 2、JavaScript
  • 3、css
  • 4、效果

---

原文-博客园

---

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

---

2、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;
				`
			);
		}
	}
};

---

3、css

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

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

---

4、效果