el-select-dropdown 修改下拉框的样式

2023-11-05

问题描述

使用el-select的时候有时候需要修改下拉框的样式,但是el-select-dropdown必须添加类名才能修改他的样式。

问题解决

1.popper-class="" element提供了为下拉框绑定类名的api,绑定类名之后使用 deep深度遍历器或者不使用scope即可修改样式,但是popper-class=""需要搭配 :popper-append-to-body="false" 使用。

用(深度)选择器设置属性不生效的原因(不搭配:popper-append-to-body="false" ):
A、原因一:select-popper 元素渲染后会脱离 #app;

发现渲染后的 dom 元素不在 #app 元素内部, 应该是 el-select 里面的 select-popper 元素渲染后会脱离 #app , 所以使用深度选择器也无法定位该元素;

B、原因二:容器不挂载到 #app 上就无法被成功渲染;

选中 el-select 的选项时页面的结构时,选项的容器并不在挂载的 div#app 上,所以设置的样式就无法正常作用到选项内容的 div 上;

:popper-append-to-body="false"作用:

在这里插入图片描述

我理解是:将下拉框是否插入到body元素中,即是否放在与div#app同级dom上。简单来说就是默认为true的时候el-select-dropdown与dev#app同级,false的时候在div#app下级,所以可以使用深度遍历器。

若有不正之处,欢迎指正。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

el-select-dropdown 修改下拉框的样式 的相关文章

随机推荐

  • 理解数据库范式

    数据库范式是数据库 设计 中必不可少的知识 没有对范式的理解 就无法设计出高效率 优雅的数据库 甚至设计出错误的数据库 而想要理解并掌握范式却并不是那 么容易 教科书中一般以关系代数的方法来解释数据库范式 这样做虽然能够十分准确的表达数据库
  • 0成本搭建自己的云数据库

    第一步 租免费的云服务器 www aliyun com 阿里云的 可以免费租三个月 进入主页后选择云服务器ESC 选择这款 点击试用就行 第二步 配置服务器 在配置服务器系统的时候选择centos 省事 别选ubuntu 很麻烦的 然后就是
  • python selenium控制浏览器打开网页 模拟鼠标动作

    selenium 是一个浏览器控制的库 需要下载安装 谷歌浏览器的驱动 chromedriver https sites google com chromium org driver downloads 在这里选择跟自己谷歌浏览器版本号一致
  • 孟言与郭安定畅谈office开发

    孟言与郭安定畅谈office开发 孟言 CSDN的观众朋友大家下午好 今天我特别高兴的邀请到我们飞升两岸的office开发专 家郭安定 老师来到我们演播室 郭 老师你好 郭安定 恩 孟言你好 CSDN观众朋友好 真的是在百忙之中 我们平常的
  • v-for动态图片列表展示以及动态给div添加背景图片

    v for动态图片列表以及动态给div添加背景图片方法 效果如下图所示 HTML div class branchWorkshop ul li div class workshopImg div span span li ul div
  • 内网渗透-代理篇(reGeorg+Proxifier代理工具)

    声明 贝塔安全实验室公众号大部分文章来自团队核心成员和知识星球成员 少部分文章经过原作者授权和其它公众号白名单转载 未经授权 严禁转载 如需转载 请联系开白 请勿利用文章内的相关技术从事非法测试 如因此产生的一切不良后果与文章作者及本公众号
  • 无线加密技术

    无线加密技术概述 随着信息技术的不断发展 人们对通信的要求也在不断提升 近年来 由于无线局域网 Wireless LAN 可以提供灵活方便的网络接入而倍受各厂商和众多消费者的青睐 越来越多的机场 餐厅 酒吧都可提供无线接入互联网的服务 使用
  • BAPI_OUTB_DELIVERY_CHANGE - 删除整个交货单和行项目

    转载自 https archive sap com discussions thread 864267 IF delivery item IS NOT INITIAL Delete particular Delivery item SELE
  • 宽带上网知识(如何进行上网流程配置,路由器上网配置)

    中国大陆现在提供上网宽带服务的公司有 网通 铁通 电信 专业点叫 ISP 因特网服务提供商 铁通业务归属于中国移动 网通业务归属于中国联通 无论哪一家 对用户提供的都是大致一样的上网服务 即宽带业务 宽带业务是通信公司为用户提供的高速访问互
  • RuntimeWarning: divide by zero encountered in log错误解决

    问题描述 最近在学习 机器学习实战 这本书时 朴素贝叶斯那里遇到了这样的问题 def train native bayes train matrix train category num train docs len train matri
  • java并发(二)--.JMM内存模型对并发的保障

    2 JMM内存模型 1 计算机结构 输入设备 就是我们的鼠标 键盘 存储器 对应的就是我们的内存 缓存 运算器和控制器共同组成了cpu 而输出设备就比如显示屏 打印机 我们重点来聊一下缓存 2 缓存 其实 当我们说计算机运行效率低下 速度慢
  • 拓端tecdat

    最近我们被要求撰写关于ARIMA ARCH的研究报告 包括一些图形和统计输出 时间序列分析模型 ARIMA ARCH GARCH模型分析股票价格数据 相关视频 在Python和R语言中建立EWMA ARIMA模型预测时间序列 简介 时间序列
  • 初学者的卡尔曼滤波——扩展卡尔曼滤波(一)

    简介 已经历经了半个世纪的卡尔曼滤波至今仍然是研究的热点 相关的文章不断被发表 其中许多文章是关于卡尔曼滤波器的新应用 但也不乏改善和扩展滤波器算法的研究 而对算法的研究多着重于将卡尔曼滤波应用于非线性系统 为什么学界要这么热衷于将卡尔曼滤
  • 文化的特点计算机,计算机文化基础 计算机的特点与分类 计算机特点与分类.pptx...

    1 4 3计算机的特点和分类 精确性高 计算机的可靠性很高 差错率极低 一般来讲只是在人工介入的地方才有可能发生错误 存储容量大 计算机的存储性是计算机区别于其他计算工具的重要特征 存储器不但能够存储大量的信息 而且能够快速准确地存入或取出
  • SQL分类及通用语法&&数据类型(超详细版)

    一 SQL分类 SQL是结构化查询语言 Structured Query Language 的缩写 它是一种用于管理和操作关系型数据库系统的标准化语言 SQL分类如下 DDL 数据定义语言 用来定义数据库对象 数据库 表 字段 DML 数据
  • 初入vue:子组件接收props值并需要对这个值进行修改的解决办法

    vue 子组件接收props值并需要对这个值进行修改的解决办法 最进刚刚从微信小程序转过来 发现了vue与其有很大的相似之处 相比之下vue确实是方便了很多 特别是vue的 双向绑定 对于组件的话vue方面限制了子组件对父组件穿来的值的修改
  • 用虚拟串口进行串口调试

    由于现在的笔记本电脑一般不带有串口 再进行串口调试时 可以用虚拟串口代替 虚拟串口下载链接 虚拟串口 Win7 下载 串口调试助手下载链接 串口调试助手 VS2010串口程序 使用的unicode库 纯API 不利用Mscomm控件 下载链
  • bulk interface驱动_USB驱动程序(较详细)一

    拓扑结构上 一个 USB 子系统并不是以总线的方式来分布 它是一棵由几个点对点连接构成的树 这些连接是连接设备和集线器的4线电缆 地 电源 和 2 个差分信号线 如同以太网的双绞线 USB主控制器负责询问每个USB设备是否有数据需要发送 由
  • ‘VB6EXT.OLB’ could not be registered

    打开VB6提示 VB6EXT OLB could not be registered 解决办法 用管理员打开 实测可行 参考 VB6 Error please help VBForums
  • el-select-dropdown 修改下拉框的样式

    问题描述 使用el select的时候有时候需要修改下拉框的样式 但是el select dropdown必须添加类名才能修改他的样式 问题解决 1 popper class element提供了为下拉框绑定类名的api 绑定类名之后使用