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

本文主要是介绍自定义el-select下拉菜单的内容以及数据回显的内容，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

最终的效果

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

    <el-selectref="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");

这篇关于自定义el-select下拉菜单的内容以及数据回显的内容的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---