自定义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");

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/9932.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

程序设计---二分

整数二分&#xff08;重点在边界&#xff09; 本质并不是单调性&#xff0c;有单调性一定可以二分&#xff0c;有二分不一定有单调性。 二分的本质是边界&#xff0c; 将整个区间一分为二&#xff0c;一半满足&#xff0c;一半不满足。 那么我们可以找到这个性质&#xff0…

Rust - 终端输入、文件读写

文章目录 查看参数接收终端输入读取文件写入文件 查看参数 fn main() { let args std::env::args();println!("{:?}", args); // Args { inner: ["target/debug/rt"] }for arg in args {println!("{}", arg);} }接收终端输入 use std::io:…

【已解决】chrome/其他浏览器:你的连接不是私密连接

一、问题原因 这个问题一般是https的网址会有&#xff0c;它是安全的访问连接&#xff0c;在原来的基础上SSL/TLS协议进行加密和身份验证。 这里可能是证书过期了&#xff0c;其实 二、解决方法【亲测有效】 方法1&#xff1a;点击高级&#xff0c;如果有继续访问对应的http…

ESLint: Unexpected ‘debugger‘ statement.(no-debugger)(debugger报红)

ESLint: Unexpected debugger statement.(no-debugger) 解决办法&#xff1a; 找到.eslintrc.js文件中rules的no-debugger更改为0即可

gpustat 不能使用问题

突然间就不能用了&#xff0c;可能是环境出了问题&#xff0c;如果GPU没问题的话&#xff0c;那么换个环境重新安装试一下&#xff08;pip install gpustat&#xff09;&#xff0c;目前是换个环境就可以了&#xff08;做个笔记&#xff09;

两正序列元素之和比值的上下界——小于等于其元素之比的最大值,大于等于元素之比的最小值

对于两个正数序列&#xff08;集合&#xff09; { a 1 , a 2 , . . . , a l } \{a_1,a_2,...,a_l\} {a1​,a2​,...,al​} 和 { b 1 , b 2 , . . . , b l } \{b_1,b_2,...,b_l\} {b1​,b2​,...,bl​} &#xff0c;满足 min ⁡ i a i b i ≤ ∑ i 1 l a i ∑ i 1 l b i ≤ …

信息系统项目管理师0101:项目建议与立项申请(7项目立项管理—7.1项目建议与立项申请)

点击查看专栏目录 文章目录 第七章 项目立项管理7.1项目建议与立项申请1.立项申请概念2.项目建议书内容记忆要点总结第七章 项目立项管理 项目立项管理是对拟规划和实施的项目技术上的先进性、适用性,经济上的合理性、效益性,实施上的可能性、风险性以及社会价值的有效性、可…

代码随想录算法训练营第三十五天| 435. 无重叠区间 763.划分字母区间 56. 合并区间

435. 无重叠区间 题目链接 思路 遍历数组&#xff0c;如果i的右区间大于i-1的左区间&#xff0c;就没有重叠&#xff0c;需要更新左区间 解题方法 遍历数组&#xff0c;如果i的右区间大于i-1的左区间&#xff0c;就没有重叠&#xff0c;需要更新左区间 Code class Solut…

在线教育系统平台网址,:在线教育如何巧用积分功能做营销活动?

在系统面世的三年多时间内&#xff0c;已服务了众多知识店铺创业者、运营者在自己领域内小有所成&#xff0c;但运用特色的营销功能与营销活动结合使用却仍让很多老师感到无解。作为在线教育技术服务商&#xff0c;一直致力于开发出更多功能去帮助机构解决在实际运营中遇到的问…

el-upload上传附件,如何限制附件类型和附件大小

el-upload上传附件&#xff0c;如何限制附件类型和附件大小 一、直接上代码 一、直接上代码 <template><!-- 普通附件上传一个&#xff08;加额外参数index&#xff09; --><!-- 话题上传附件 --><!-- dataParams: {fileType: "",projectId: &…

镜舟科技亮相2024中国移动算力网络大会、Qcon、DTC等多项活动

在刚刚过去的 4 月份&#xff0c;镜舟科技受邀参与一系列技术交流活动&#xff0c;与移动云、金科创新社、infoQ、墨天轮、开科唯识等媒体及合作伙伴展开积极交流&#xff0c;并分享其在数据技术、金融等垂直行业领域的创新实践&#xff0c;从产业侧、业务侧、技术侧洞察需求、…

idea-自我快捷键-2

1. 书签 创建书签&#xff1a; 创建书签&#xff1a;F11创建特色标记书签&#xff1a;Ctrl F11快速添加助记符书签&#xff1a;ctrl shift 数字键 查看书签&#xff1a; shift F11快速定位到助记符书签&#xff1a;Ctrl 数字键 删除书签&#xff1a; delete 2. 自动…

【最新点云数据增强综述】深度学习点云数据增强技术的进展

深度学习(DL)已成为点云分析任务(如检测、分割和分类)的主流和有效方法之一。为了减少深度学习模型训练过程中的过拟合,提高模型性能,尤其是在训练数据的数量和/或多样性有限的情况下,增强往往至关重要。虽然各种点云数据增强方法已被广泛应用于不同的点云处理任务中,但…

docker搭建mysql集群实现主从复制

前言 随着业务的增长&#xff0c;一台数据服务器已经满足不了需求了&#xff0c;负载过重。这个时候就需要减压了&#xff0c;实现负载均衡和读写分离&#xff0c;一主一丛或一主多从。 主服务器只负责写&#xff0c;而从服务器只负责读&#xff0c;从而提高了效率减轻压力。 …

MySQL导入导出详细教程

导出 语法 mysqldump [OPTIONS] database [tables] mysqldump [OPTIONS] --databases [OPTIONS] DB1 [DB2 DB3...] mysqldump [OPTIONS] --all-databases [OPTIONS]导出所有数据库 mysqldump -uroot -proot --all-databases >/tmp/all.sql导出db1、db2两个数据库的所有数…

融资融券概念和操纵流程,案例解析

融资融券是一种金融工具&#xff0c;它允许投资者在证券市场上进行杠杆交易。简单来说&#xff0c;融资就是借钱买股票&#xff0c;融券就是借股票卖出。这种交易方式可以帮助投资者在短期内获得更高的收益&#xff0c;但同时也伴随着较高的风险。 案例背景&#xff1a; 假设…

基于VOLOPV2的自动驾驶环境感知系统

基于VOLOPV2的自动驾驶环境感知系统是一个复杂的系统&#xff0c;它主要负责实时检测并识别周围环境中的各种物体和信息&#xff0c;为自动驾驶车辆提供必要的感知数据。以下是对该系统的一个简要介绍&#xff1a; 环境感知是自动驾驶系统中的一个关键部分&#xff0c;它依赖于…

app知识付费系统,教育机构万圣节招生活动该怎么做?

马上就到11月1日万圣节啦&#xff0c;又是一个活动招生的好时机!对于教培机构来说&#xff0c;节日活动是非常有效的营销手段。一场突出的创意活动&#xff0c;可以有效提高机构的美誉度&#xff0c;可以有效增加客户的粘性&#xff0c;带来转介绍!招生方案千千万&#xff0c;适…

静态分析-RIPS-源码解析记录-03

既然有源码可以debug&#xff0c;那么直接跑测试用例&#xff0c;来跟踪处理逻辑感觉比直接看代码理逻辑更快一些&#xff0c;尤其是涉及到了扫描阶段&#xff0c;不然不容易弄清某刻某个变量的取值。 对于所有漏洞而言&#xff0c;都是由sink点到source点检测是否有过滤函数&…

数据库管理-第187期 23ai:怎么用SQL创建图(20240510)

数据库管理187期 2024-05-10 数据库管理-第187期 23ai:怎么用SQL创建图&#xff08;20240510&#xff09;1 安装PGX1.1 数据库配置对应用户1.2 使用RPM包安装Graph Server1.3 安装Oracle Graph Client1.4 访问PGX页面 2 SQL Property Graph2.1 创建SQL属性图2.2 关于点和边图元…