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

最终的效果

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

    <el-select
      ref="seriesBorderTypeRef"
      class="series-border-type"
      @change="changeSeriesBorderType"
      v-model="customStyle.seriesBorderType"
      placeholder="请选择边框类型"
      style="width: 100%; margin-bottom: 16px"
    >
      <el-option value="solid" style="display: flex; align-items: center">
        <div style="border-top: 2px solid #000; width: 100%; height: 0"></div>
      </el-option>
      <el-option value="dashed" style="display: flex; align-items: center">
        <div style="border-top: 2px dashed #000; width: 100%; height: 0"></div>
      </el-option>
      <el-option value="dotted" style="display: flex; align-items: center">
        <div style="border-top: 2px dotted #000; width: 100%; height: 0"></div>
      </el-option>
    </el-select>

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

这里我设置了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");