elementUI 下拉框加提示文案

news2024/11/24 14:52:43

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

在这里插入图片描述

 <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.coloradmin.cn/o/1588353.html

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

相关文章

物联网SaaS平台

在信息化、智能化浪潮席卷全球的今天&#xff0c;物联网SaaS平台作为推动工业数字化转型的重要工具&#xff0c;正日益受到广泛关注。那么&#xff0c;物联网SaaS平台究竟是什么&#xff1f;HiWoo Cloud作为物联网SaaS平台又有哪些独特优势&#xff1f;更重要的是&#xff0c;它…

Docker 学习笔记(三):Centos7 中 Docker 使用,镜像、容器,以及操作等常用命令小结

一、前言 记录时间 [2024-4-7] 前置文章&#xff1a; Docker学习笔记&#xff08;一&#xff09;&#xff1a;入门篇&#xff0c;Docker概述、基本组成等&#xff0c;对Docker有一个初步的认识 Docker学习笔记&#xff08;二&#xff09;&#xff1a;在Linux中部署Docker&#…

IDEA2023连接服务器docker并部署ruoyi-cloud-plus项目

文章目录 TCP 方式连接docker1. 服务器docker配置修改查看虚拟机中Docker配置文件位置修改配置文件重启docker服务关闭防火墙 2. idea安装docker插件3. idea连接docker服务 部署ruoyi-cloud-plus项目1. 项目环境说明2. 安装Centos73. 安装docker4. idea配置服务器SSH连接5. ide…

SHAP安装问题

一、安装 pip install shap -i https://pypi.tuna.tsinghua.edu.cn/simple 二、遇到问题 1、提示报错如下&#xff1a; ModuleNotFoundError: No module named numba.core 安装numba&#xff1a; pip install numba -i https://pypi.tuna.tsinghua.edu.cn/simple 提示已经…

【go从入门到精通】作用域,包详解

作者简介&#xff1a; 高科&#xff0c;先后在 IBM PlatformComputing从事网格计算&#xff0c;淘米网&#xff0c;网易从事游戏服务器开发&#xff0c;拥有丰富的C&#xff0c;go等语言开发经验&#xff0c;mysql&#xff0c;mongo&#xff0c;redis等数据库&#xff0c;设计模…

基于React封装Handsontable并兼容antd

背景 其实Handsontable官方也提供了React的版本&#xff0c;但是官方的版本再编辑和渲染的时候并不能够很好的嵌入第三方的组件库。这就导致了&#xff0c;使用了Handsontable就没有办和普通的react项目一样轻松引用其他第三方组件。因此对其react的版本进行了二次的封装&#…

MySQL之sql性能分析

sql执行频率 MySQL客户端连接成功后&#xff0c;通过show[session|global]status命令可以提供服务器状态信息。通过如下指令&#xff0c;可以查看当前数据库的所有INSERT、DELETE、UPDATE、SELECT的访问频次。 慢日志查询 慢查询日志记录了所有执行时间超过指定参数(longquer…

石子合并(区间dp)-java

石子合并问题是经典的区间dp问题&#xff0c;我们需要枚举中间端点k的情况从而来推出dp数组的值。 文章目录 前言 一、石子合并问题 二、算法思路 1.问题思路 2.状态递推公式 二、代码如下 代码如下&#xff08;示例&#xff09;&#xff1a; 2.读入数据 3.代码运行结果如下&am…

CY7.5-COOH荧光属性Cyanine7.5花菁染料

CY7.5-COOH&#xff0c;作为一种Cyanine 7.5花菁染料&#xff0c;在荧光属性上表现出色。其独特的化学结构赋予了它荧光性质&#xff0c;使其在生物标记、荧光成像和光学传感等领域具有诸多应用前景。 CY7.5-COOH具有出色的荧光量子产率&#xff0c;这意味着在激发光的照射下&…

电商市场价格治理的有效方法

监测价格的目的是为了治理价格&#xff0c;品牌在发展过程中必然要做价格管控&#xff0c;否则任由渠道自由生长&#xff0c;最后的结果多是低价不断&#xff0c;且渠道愈发难以管控&#xff0c;所以在电商链接并不多时&#xff0c;也应对渠道进行监测、治理&#xff0c;将渠道…

【学习路径】AI入门路线分享

近期整理飞书文档&#xff0c;一些权限被关掉了。看好多人在申请访问这个飞书文档&#xff0c;于是把它单独拿出来放在CSDN上&#xff0c;供大家参考~ 原视频地址&#xff1a;AI&#xff1a;从小白到入门&#xff0c;超详细人工智能成长路径分享_哔哩哔哩_bilibili 文章目录 1.…

69787987

c语言中的小小白-CSDN博客c语言中的小小白关注算法,c,c语言,贪心算法,链表,mysql,动态规划,后端,线性回归,数据结构,排序算法领域.https://blog.csdn.net/bhbcdxb123?spm1001.2014.3001.5343 给大家分享一句我很喜欢我话&#xff1a; 知不足而奋进&#xff0c;望远山而前行&am…

ArcGIS Pro中的3D建模

在本文中,我讲述了我最近一直在探索的在 ArcGIS Pro 中设计 3D 模型的过程。 我的目标是尽可能避免与其他软件交互(即使是专门用于 3D 建模的软件),并利用 Pro 可以提供的可能性。 这个短暂的旅程分为三个不同的阶段:准备、组装和照明。 我们必须使用一些布局可能性以及一…

android平台下opencv的编译--包含扩展模块

由于项目需要使用安卓平台下opencv的扩展库&#xff0c;对于通用的opencv库&#xff0c; opencv官网提供了android的SDK 但未能提供扩展库&#xff0c;因此需要自己进行源码编译。本文记录android平台下opencv及其扩展库的交叉编译。 前提&#xff1a;主机已安装android-ndk交…

泰迪智能科技受邀参加花都区产教评技能生态链建设政策宣讲培训会

2024年4月8日&#xff0c;由广州市花都区人力资源和社会保障局主办的花都区产教评技能生态链建设政策宣讲培训会在广州市华风高级技工学校顺利举行。广东省人力资源和社会保障厅职业能力建设处鲍彬科长&#xff0c;广州市人力资源和社会保障局职业能力建设处肖飞扬科长&#xf…

volta(轻松切换管理Node.js版本)

Node.js版本管理 Volta提供了一个简单直观的命令行界面&#xff0c;可以轻松地安装、卸载、更新和切换Node.js版本。 Volta 既可以全局使用&#xff0c;也可以在项目级别使用&#xff0c;可以为每个项目单独设置node版本&#xff0c;nvm不行。 下载安装Volta 参考&#xff1a; …

JavaScript ECMAScript标准的与时俱进:从ES6至ES14的革新之路与关键技术特性剖析

ECMAScript&#xff08;通常缩写为ES&#xff09;是一种标准化的脚本语言规范&#xff0c;由ECMA International&#xff08;前身为European Computer Manufacturers Association&#xff0c;欧洲计算机制造商协会&#xff09;制定。自1997年发布首个版本以来&#xff0c;ECMAS…

JavaScript_注释数据类型

JavaScript_语法_注释&数据类型&#xff1a; 1.2注释&#xff1a; 1.单行注释&#xff1a;//注释内容 2.多行注释&#xff1a;/*注释内容*/ 1.3数据类型&#xff1a; 1.原始数据类型(基本数据类型)&#xff1a;&#xff08;只有这五种&#xff09; 1.number&#xff1a;数字…

网络安全知识知多少?

网络安全知识在当今数字化的世界中显得尤为重要。随着网络技术的不断发展和普及&#xff0c;网络安全问题也日益突出&#xff0c;对个人、组织乃至国家的安全都构成了严重威胁。因此&#xff0c;了解并掌握一些基本的网络安全知识显得尤为重要。 首先&#xff0c;我们需要明白网…

第21天:WEB攻防-JavaWeb项目UWT身份攻击组件安全访问控制;第22天:WEB攻防-JS项目Node.JS框架安全识别审计验证绕过

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收…