elementUI 下拉框加提示文案

效果如下:
展示文案在最下面,跟选项有个分割线

在这里插入图片描述

 <el-select v-model="value" placeholder="请选择"  clearable popper-class="addNotice" class="addNoticeS" @visible-change="(v) =>selectNotice(v,'展示的提示文案')" >......</el-select>
  • visible-change 事件监听下拉框的显示与隐藏
/*** 下拉框 文案提示* @param visible 是否展示* @param notice  文案*/
function selectNotice(visible, notice) {if (visible) {//下拉框出现时,动态创建需要添加的元素$('.el-select-dropdown').append(`<div class='select_addname_line'></div><div class='select_addname'>${notice}</div>`)} else {//关闭时要清空,防止累加$('.select_addname').remove()$('.select_addname_line').remove()}
}
//文案样式
.select_addname{position: relative;max-width: 100% !important;box-sizing: border-box;padding: 14px 2% 20px;color: #909399;
}
//分割线
.select_addname_line{height: 1px;width: 100%;background:#909399 ;transform: scaleY(0.5);
}

为了保证下拉框跟select等宽度需要加一下调

  • 加自定义类名addNotice调整最外层popper的样式
  • 加类名addNoticeS,动态获取select的宽度
.addNotice{background: #FFF !important;
}

jQuery进行样式调整,保证下拉框跟select等宽

 nextTick(() => {let width=$('.addNoticeS').width() + "px"$('.addNotice').css({width})});

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

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

相关文章

Testng测试框架(7)--测试运行

忽略测试 TestNG可以让你忽略类、特殊包、包及其子中的所有Test方法。 当在测试方法级别使用Ignore 注解&#xff0c;在功能上与Test(enabledfalse).一样。 以下例子将忽略类中所有tests。 import org.testng.annotations.Ignore; import org.testng.annotations.Test; Ign…

秦朗丢寒假作业系摆拍 博主被处罚

大家好&#xff01; 我是老洪&#xff0c;刚看到秦朗丢寒假作业系摆拍博主被处罚。 据央视财经媒体报道&#xff0c;近期&#xff0c;“秦朗丢寒假作业”事件被证实为自导自编的摆拍视频。 图片来源央视财经公众号截图 该博主与同事薛某&#xff0c;为了吸引更多的粉丝和流量&a…

Lua语法(二)——闭包/日期和时间

参考链接: 系列链接: Lua语法(一) 系列链接: Lua语法(二)——闭包/日期和时间 系列链接: Lua语法(三)——元表与元方法 系列链接: Lua语法(四)——协程 系列链接: Lua语法(五)——垃圾回收 系列链接: Lua语法(六)——面相对象编程 Lua语法 目录二 概述闭包模块和包模块和包相关…

基于SSM的旅游管理系统论文

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对旅游信息管理混乱&#xff0c;出错率高&#xff0c;信息安全性差&am…

Go语言中忘记字符串格式化可能产生的副作用

格式化字符串是开发人员经常要进行操作,无论是返回错误还是记录消息。但在处理并发应用程序时,开发人员很容易忘记字符串格式化带来的潜在副作用。下面将看到两个具体示例:一个是读取etcd存储导致数据竞争,另一个是导致死锁的情况。 1. etcd数据竞争 etcd是一个用Go实现的…

解决cmd输入py文件路径不能执行,使用anaconda prompt 能执行

究其原因&#xff0c;是因为没有配置环境&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 第一步&#xff1a;配置环境变量 操作步骤如下&#xff1a; 1、右击此电脑 ---->属性 2、高级系统设置 3、点击环境变量 4、选择 …

代码随想录--数组--长度最小的子数组

题目 给定一个含有 n 个正整数的数组和一个正整数 s &#xff0c;找出该数组中满足其和 ≥ s 的长度最小的 连续 子数组&#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0。 示例&#xff1a; 输入&#xff1a;s 7, nums [2,3,1,2,4,3] 输出&#…

Java学习笔记03:核心类

4.1 基本类型的封装类 // 字符串转int Integer obj new Intreger("10"); int n new Integer("10"); int num Integer.parseInt("10"); // 字符串转float float fl loat.parseFloat("10.0"); float f2 new Float("10.0"…

【论文笔记】ResRep: Lossless CNN Pruning via Decoupling Remembering and Forgetting

Abstract 提出了ResRep&#xff0c;一种无损通道修剪的新方法&#xff0c;它通过减少卷积层的宽度&#xff08;输出通道数&#xff09;来缩小CNN的尺寸。 建议将CNN重新参数化为记忆部分和遗忘部分&#xff0c;前者学习保持性能&#xff0c;后者学习修剪。通过对前者使用常规 …

[BT]BUUCTF刷题第16天(4.12)

第16天 Web [MRCTF2020]Ezpop 打开网站就是一段泄露的源代码&#xff1a; <?php //flag is in flag.php //WTF IS THIS? //Learn From https://ctf.ieki.xyz/library/php.html#%E5%8F%8D%E5%BA%8F%E5%88%97%E5%8C%96%E9%AD%94%E6%9C%AF%E6%96%B9%E6%B3%95 //And Crack…

「49」一拆为九,探索直播内容的商业价值

「49」拆分变现:一拆为九探索直播内容的商业价值 直播已经成为现代社交互动的热门方式,然而,直播内容一经结束,是否可以为我们带来更多的价值? 这篇文章将探究如何发挥创意,将直播内容变现为多种形式,例如电子书、实体书、课程和短视频、文章、音频等,让我们一起来一…

数字化转型(二)-华为发布的数字化转型:从战略到执行

个人认为这是一篇很好&#xff0c;值得看的文章&#xff0c;但是没啥大用&#xff0c;可供参考。 数字化转型是一个复杂而全面的过程&#xff0c;它涉及到从战略规划到具体执行的多个层面。根据提供的信息&#xff0c;我们可以从以下几个方面来理解和探讨数字化转型的从战略到执…

文件名乱码危机:数据恢复全攻略

在数字化时代的浪潮中&#xff0c;电脑文件成为我们日常生活和工作中不可或缺的一部分。然而&#xff0c;有时我们会突然遭遇一个令人头疼的问题&#xff1a;原本清晰易读的文件名突然变成了乱码。这些乱码文件名不仅让我们无法准确识别文件内容&#xff0c;更可能意味着数据丢…

时间序列分析 # 平稳性检验和ARMA模型的识别与定阶 #R语言

掌握单位根检验的原理并能解读结果&#xff1b;掌握利用序列的自相关图和偏自相关图识别模型并进行初步定阶。 原始数据在文末&#xff01;&#xff01;&#xff01; 练习1、根据某1971年9月-1993年6月澳大利亚季度常住人口变动&#xff08;单位&#xff1a;千人&#xff09;的…

一个开源跨平台嵌入式USB设备协议:TinyUSB

概述 TinyUSB 是一个用于嵌入式系统的开源跨平台 USB 主机/设备堆栈&#xff0c;设计为内存安全&#xff0c;无需动态分配&#xff0c;线程安全&#xff0c;所有中断事件都被推迟&#xff0c;然后在非 ISR 任务函数中处理。查看在线文档以获取更多详细信息。 源码链接&#xff…

Redis从入门到精通(十五)Redis分布式缓存(三)Redis分片集群的搭建和原理分析

文章目录 前言5.4 分片集群5.4.1 搭建分片集群5.4.2 散列插槽5.4.3 集群伸缩5.4.3.1 需求分析5.4.3.2 创建新的Redis实例5.4.3.3 添加新节点到Redis集群5.4.3.4 转移插槽 5.4.4 故障转移5.4.4.1 自动故障转移5.4.4.2 手动故障转移 5.4.5 RedisTemplate 5.5 小结 前言 Redis分布…

kali工具----枚举工具

一、枚举工具 枚举是一类程序&#xff0c;它允许用户从一个网络中收集某一类的所有相关信息。本节将介绍DNS枚举和SNMP枚举技术。DNS枚举可以收集本地所有DNS服务和相关条目。DNS枚举可以帮助用户收集目标组织的关键信息&#xff0c;如用户名、计算机名和IP地址等&#xff0c;…

【Qt】界面优化

目录 一、QSS 1.1 基本语法 1.2 QSS设置方法 1.2.1 指定控件样式设置 1.2.2 全局样式设置 1.2.3 从文件加载样式表 1.2.4 使用Qt Designer编辑样式 1.3 选择器 1.3.1 介绍 1.3.2 子控件选择器 1.3.3 伪类选择器 1.4 样式属性(盒模型) 1.5 代码示例(登录界面) 二、…

OSCP靶场--Banzai

OSCP靶场–Banzai 考点(ftp爆破 webshell上传web1访问403web2可以访问webshell反弹mysql udf提权) 1.nmap扫描 ## nmap扫描一定要使用 -p- 否则容易扫不全端口 ┌──(root㉿kali)-[~/Desktop] └─# nmap -sV -sC 192.168.158.56 -Pn -p- --min-rate 2500Starting Nmap 7.…

机器学习前导——PyCharm PyTorch Python3 机器学习

机器学习前导——PyCharm & pytorch & Python3 & 机器学习 文章目录 前言PyCharmPyTorchPython3机器学习联系 前言 这学期选了《机器学习》&#xff0c;第一次接触&#xff0c;对一些专有名词很陌生。 PyCharm PyCharm是一款由JetBrains开发的软件&#xff0c…