当前位置: 首页 > news >正文

ElementUI,修改el-cascader的默认样式

Element UI 中的下拉弹窗是通过在整个body标签末尾动态添加div实现的,所以修改样式时,必须要定义全局样式才能实现样式覆盖,那怎样才能避免全局的样式污染呢?

解决办法:通过给组件添加自定义的 popper-class 属性来避免全局样式污染;

<el-cascaderv-model="showOptions"style="height: 36px;width:260px"placeholder="显示选项":options="optionsList":props="props"collapse-tagsclearablepopper-class="dropDownPanel"
></el-cascader>

在这里插入图片描述

下拉框的样式设置:

<style>
.dropDownPanel{background: #123493;border: 1px solid rgba(57,106,254,1);
}
.dropDownPanel[x-placement^=bottom] .popper__arrow {display: none;
}
.dropDownPanel .el-cascader-menu {color: #fff;border-right: 1px solid rgba(57,106,254,1);
}
.dropDownPanel .el-cascader-node.in-active-path {color: #38B4C1;/* background: transparent; */
}
.dropDownPanel .el-cascader-node.is-active {color: #38B4C1;
}
.dropDownPanel .el-cascader-node:not(.is-disabled):focus, 
.dropDownPanel .el-cascader-node:not(.is-disabled):hover {background-color: #0C0F56!important;
}
</style>

在这里插入图片描述
样式修改

<style scoped>
/deep/ .el-tag.el-tag--info {background-color: #123493;border-color: rgba(57,106,254,1);color: #FFFFFF;
}
/deep/ .el-cascader__tags .el-tag:not(.is-hit) {border-color: rgba(57,106,254,1);
}
</style>

相关文章:

ElementUI,修改el-cascader的默认样式

Element UI 中的下拉弹窗是通过在整个body标签末尾动态添加div实现的&#xff0c;所以修改样式时&#xff0c;必须要定义全局样式才能实现样式覆盖&#xff0c;那怎样才能避免全局的样式污染呢&#xff1f; 解决办法&#xff1a;通过给组件添加自定义的 popper-class 属性来避…...

外卖系统海外版:代码与美食的完美交融

在数字化时代&#xff0c;外卖系统海外版正引领着全球美食点餐的新潮流。不仅为用户提供了便捷的用餐服务&#xff0c;更通过技术创新为美食与代码之间搭建了一座桥梁。本文将探讨其中的一些技术应用&#xff0c;并呈现与美食完美交融的全新体验。 多语言支持代码示例 def m…...

Java代码解析:初学者的编程入门指南

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 Java作为一门强大而广泛应用的编程语言&#x…...

数据结构--图

树具有灵活性&#xff0c;并且存在许多不同的树的应用&#xff0c;但是就树本身而言有一定的局限性&#xff0c;树只能表示层次关系&#xff0c;比如父子关系。而其他的比如兄弟关系只能够间接表示。 推广--- 图 图形结构中&#xff0c;数据元素之间的关系是任意的。 一、图…...

AXure的情景交互

目录 导语&#xff1a; 1.erp多样性登录界面 2.主页跳转 3.省级联动​编辑 4. 下拉加载 导语&#xff1a; Axure是一种流行的原型设计工具&#xff0c;可以用来创建网站和应用程序的交互原型。通过Axure&#xff0c;设计师可以创建情景交互&#xff0c;以展示用户与系统的交…...

数据库操作习题12.12

考虑如下的人员数据&#xff0c;其中加下划线的是主码&#xff0c;数据库模式由四个关系组成: employee (empname, street, city) works (empname, compname, salary) company(id, compname, city) managers (empname, mgrname) 其中 关系 employee 给出人员的基本信息,包括人员…...

Redis之INCR命令,通常用于统计网站访问量,文章访问量,分布式锁

前言 Redis的INCR命令用于将键的值增加1。如果键不存在&#xff0c;则会先将键的值设置为0&#xff0c;然后再执行INCR操作。INCR命令的作用是对计数器进行自增操作&#xff0c;可以用于实现多种场景&#xff0c;比如统计网站访问量、文章访问量、分布式锁等。 一、Redis键之…...

window运行celery报错

报错信息 Traceback (most recent call last): File "c:\program files\python36\lib\site-packages\billiard\pool.py", line 359, in workloop result (True, prepare_result(fun(*args, **kwargs))) File "c:\program files\python36\lib\site-packages\ce…...

玩转Docker(五):网络

文章目录 〇、关于linux系统网络一、none网络二、host网络三、bridge网络一个问题&#xff1a;为什么在主机上仍可以通过localhost:port访问到容器中的服务&#xff1f; 四、user-defined网络 Docker安装时会自动在host上创建三个网络&#xff0c;我们可用docker network ls命令…...

选择合适教育管理软件:必须考虑的10个关键问题

随着教育行业的迅速数字化&#xff0c;学校要能够提供最新的管理和教育方法。大家逐渐意识到技术让运营变得更容易、更有效率。 不过首先我们需要找到一个能满足需求的应用程序。面对众多的选择&#xff0c;你该如何选择一个合适的平台呢&#xff1f;当然&#xff0c;没有人想…...

前端不同架构的分层设计

1. 架构设计分层: (1). 系统架构: ①. 应用场景:a. 应用在整个系统内,如与后台服务如何通信,与第三方系统如何集成.②. 前提条件:a. 了解前端系统与其它系统间的关系,包括业务关系和协作机制.b. 了解后端系统,需要规定与后台数据传递的机制,包括:(1). api设计规范(2). 访问授…...

android系统镜像文件

boot.img&#xff1a;这是包含内核和设备树&#xff08;Device Tree&#xff09;的镜像文件。它被引导加载程序&#xff08;bootloader&#xff09;加载以启动系统&#xff0c;并负责将控制权转交给内核。 dtbo.img&#xff1a;这是设备树增量编译&#xff08;Device Tree Ove…...

相位的重要性

在过去的几年中&#xff0c;相干信号和图像处理尖端技术的开发和应用有了显著的增长。相干处理的特点是使用一个称为相位的单一量[1]。相比之下&#xff0c;非相干处理只利用信号幅度或强度。需要进行相干处理的例子包括合成孔径雷达&#xff08;SAR&#xff09;、合成孔径声纳…...

(三十三)补充Python经典面试题(吸收高级编程特性)

第一题&#xff1a; def func(a, b[]): pass一、上题讲解&#xff1a; 这个函数定义有一个默认参数b&#xff0c;它的默认值是一个空列表[]。这道面试题涉及到Python中函数参数默认值的一些重要概念和陷阱。 首先&#xff0c;当你调用这个函数时&#xff0c;如果不传递参数b…...

SQL进阶理论篇(四):索引的结构原理(B树与B+树)

文章目录 简介如何评价索引的数据结构设计好坏二叉树的局限性什么是B树什么是B树总结参考文献 简介 我们在上一节中说过&#xff0c;索引其实是一种数据结构&#xff0c;那它到底是一种什么样的数据结构呢&#xff1f;本节将简单介绍一下几个问题&#xff1a; 什么样的数据结…...

springMVC-模型数据的处理

一、数据放入到request域当中 1、把获取的数据放入request域中&#xff0c; 方便在跳转页面去显示 <a>添加主人信息</a> <form action"vote/vote04" method"post" >主人id&#xff1a;<input type"text" name"id&q…...

计算机组成原理-微指令的设计与微程序控制单元的设计

文章目录 微指令的设计微指令的格式微指令的编码方式水平型微指令的操作控制部分的编码方式直接编码字段直接编码例题字段间接编码方式 微指令的地址形成方式例题小结 微程序控制单元的设计微程序设计分类硬布线与微程序的比较 微指令的设计 微指令的格式 水平型微指令的操作…...

PyTorch机器学习与深度学习

近年来&#xff0c;随着AlphaGo、无人驾驶汽车、医学影像智慧辅助诊疗、ImageNet竞赛等热点事件的发生&#xff0c;人工智能迎来了新一轮的发展浪潮。尤其是深度学习技术&#xff0c;在许多行业都取得了颠覆性的成果。另外&#xff0c;近年来&#xff0c;Pytorch深度学习框架受…...

羊奶vs牛奶,羊大师告诉你谁是更营养的选择?

羊奶vs牛奶&#xff0c;羊大师告诉你谁是更营养的选择&#xff1f; 羊奶和牛奶是两种常见的乳制品&#xff0c;它们不仅在口味上有所差异&#xff0c;而且在营养成分方面也存在一些差异。本文将对羊奶和牛奶的营养成分进行全面对比&#xff0c;旨在帮助读者更好地了解这两种乳…...

机器学习之线性回归(Linear Regression)

概念 线性回归(Linear Regression)是机器学习中的一种基本的监督学习算法,用于建立输入变量(特征)与输出变量(目标)之间的线性关系。它假设输入变量与输出变量之间存在线性关系,并试图找到最佳拟合线来描述这种关系。 在简单线性回归中,只涉及两个变量:一个是自变量…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...