自定义el-select下拉菜单的内容以及数据回显的内容

最终的效果

下拉选项的自定义内容好实现，因为他有默认插槽，所以直接在el-option标签里面写自定义内容就可以实现

关键上方选中的数据回显应该怎么做

这里我设置了ref为seriesBorderTypeRef,在change事件中通过以下代码就可实现数据回显部分

seriesBorderTypeRef.value.$el.children[0].children[0].setAttribute(
	"style",
	`width: 100%; height:0;border-top: 2px ${customStyle.seriesBorderType} #000;`
);

但是此时虽然实现了自定义内容但v-model绑定的值也回显了，所以此时我们要对默认的数据回显处理一下，在style标签中设置如下代码

.series-border-type {
	::v-deep(.el-select__placeholder span) {
		display: none;
	}
}

.现在完美实现了需求，最后不要忘记清除添加的style样式哦

seriesBorderTypeRef.value.$el.children[0].children[0].removeAttribute("style");