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

2024-05-11 09:52

本文主要是介绍自定义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下拉菜单的内容以及数据回显的内容的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/979205

相关文章

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

Python实现word文档内容智能提取以及合成

《Python实现word文档内容智能提取以及合成》这篇文章主要为大家详细介绍了如何使用Python实现从10个左右的docx文档中抽取内容,再调整语言风格后生成新的文档,感兴趣的小伙伴可以了解一下... 目录核心思路技术路径实现步骤阶段一:准备工作阶段二:内容提取 (python 脚本)阶段三:语言风格调

一文详解如何在Python中从字符串中提取部分内容

《一文详解如何在Python中从字符串中提取部分内容》:本文主要介绍如何在Python中从字符串中提取部分内容的相关资料,包括使用正则表达式、Pyparsing库、AST(抽象语法树)、字符串操作... 目录前言解决方案方法一:使用正则表达式方法二:使用 Pyparsing方法三:使用 AST方法四:使用字

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient

SpringValidation数据校验之约束注解与分组校验方式

《SpringValidation数据校验之约束注解与分组校验方式》本文将深入探讨SpringValidation的核心功能,帮助开发者掌握约束注解的使用技巧和分组校验的高级应用,从而构建更加健壮和可... 目录引言一、Spring Validation基础架构1.1 jsR-380标准与Spring整合1

MySQL 中查询 VARCHAR 类型 JSON 数据的问题记录

《MySQL中查询VARCHAR类型JSON数据的问题记录》在数据库设计中,有时我们会将JSON数据存储在VARCHAR或TEXT类型字段中,本文将详细介绍如何在MySQL中有效查询存储为V... 目录一、问题背景二、mysql jsON 函数2.1 常用 JSON 函数三、查询示例3.1 基本查询3.2

SpringBatch数据写入实现

《SpringBatch数据写入实现》SpringBatch通过ItemWriter接口及其丰富的实现,提供了强大的数据写入能力,本文主要介绍了SpringBatch数据写入实现,具有一定的参考价值,... 目录python引言一、ItemWriter核心概念二、数据库写入实现三、文件写入实现四、多目标写入

使用Python将JSON,XML和YAML数据写入Excel文件

《使用Python将JSON,XML和YAML数据写入Excel文件》JSON、XML和YAML作为主流结构化数据格式,因其层次化表达能力和跨平台兼容性,已成为系统间数据交换的通用载体,本文将介绍如何... 目录如何使用python写入数据到Excel工作表用Python导入jsON数据到Excel工作表用

Mysql如何将数据按照年月分组的统计

《Mysql如何将数据按照年月分组的统计》:本文主要介绍Mysql如何将数据按照年月分组的统计方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql将数据按照年月分组的统计要的效果方案总结Mysql将数据按照年月分组的统计要的效果方案① 使用 DA

Go 语言中的select语句详解及工作原理

《Go语言中的select语句详解及工作原理》在Go语言中,select语句是用于处理多个通道(channel)操作的一种控制结构,它类似于switch语句,本文给大家介绍Go语言中的select语... 目录Go 语言中的 select 是做什么的基本功能语法工作原理示例示例 1:监听多个通道示例 2:带