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 修改下拉框的样式 的相关文章

  • 将 VueJs 组件添加到 Django 模板中

    我正在开发一个 Django 网站 我希望将一些 Vue 组件 散布 到 Django 渲染的模板中 我正在单个存储库中工作 并使用 webpack 设置来创建我在 Django 模板中使用的 style js 包 我正在努力让功能按照我想
  • Vue.js 动态图像路径未加载

    我试图在单个文件组件中动态加载图像 但收到错误消息 指出无法找到该模块 我想我正在尝试做同样的事情这个帖子 https stackoverflow com questions 40491506 vue js dynamic images n
  • 如何从 vue 组件调用 App.vue 中的方法

    我有一个 vue 组件和一个 vue 元素声明 如下所示 Vue component todo item template li This is a todo li methods test function I am getting an
  • firestore 安全规则 request.auth.uid 不起作用

    Firestore 安全规则不起作用 帮我 无法读取用户 用户 ID 的文档数据 安全规则 service cloud firestore match databases database documents match users use
  • Laravel VueJS:构建多页面应用程序而不诉诸单页面应用程序(SPA)方法

    我正在尝试构建 Laravel 5 5 VueJs 多页面应用程序 我不想使用 SPA 单页应用程序 方法使其看起来像是一个多页面应用程序 URL处的注册页面就是这种情况 register 通过命令php artisan make auth
  • 如何在Vue3中对setup的内部函数(不是返回)进行单元测试?

    我想这样测试 情况1 错误 无法监视内部属性 因为它不是函数 改为未定义 组件 vue export default setup function outer inner function inner do something for on
  • 使用 vue.js 显示 json 结果

    您好 我尝试使用 vue js 显示 json 文件结果 目标是结果将显示在值上 这是我的代码 data return fetchData function var self this self http get api casetotal
  • Web 扩展中共享 vuex 状态(死对象问题)

    我正在尝试在网络扩展中使用共享的 vue js 状态 状态存储在后台脚本的 DOM 中并呈现在弹出页面中 第一次尝试 我的第一次尝试是使用一个没有 vuex 的简单商店 背景 js var store count 0 popup js br
  • 如何修复套接字 io 中的 400 错误错误请求?

    我有一个前端应用程序 VUE JS 我有一个后端 Nest JS Vue JS 应用程序使用 vue socket io extended 库通过 websockets 从后端获取数据 当 Vue JS 应用程序启动时 我在浏览器中看到错误
  • 如何在Vue中获取输入字段值

    我是 Vue 新手 我需要一些帮助来从输入字段获取值 在我的表格中 我有
  • { ...obj1, obj2 } 到底做什么[重复]

    这个问题在这里已经有答案了 假设我们有两个对象 const state fishes some obj data animals some obj data const animals some NEW data 在Vuex中有一个方法re
  • 在新窗口中打开 VueJS 组件

    我有一个只有一页的基本 VueJS 应用程序 它不是 SPA 而且我不使用 vue router 我想实现一个按钮 单击该按钮时会使用我的 Vue 组件之一的内容执行 window open 函数 查看来自的文档window open ht
  • 从组件传递数据

    我对 Vue 相当陌生 我正在尝试将数据从组件传递到视图 我不确定我是否在使用props正确的 我有一个对话框 当我保存时 我想将数据插入数据库 我也想重复使用addCustomer function 这就是为什么我没有将该函数放置在组件中
  • Vue 监听 Vuex 提交吗?

    有没有一种方法可以监听 Vuex 提交 而不观察任何随提交而更改的属性 只是简单地找出是否发生了提交 我有一个 Filter 组件 想将其放入 NPM 包中 但我已经有一个用例 在该用例中 我希望设置一个 cookie 在选择过滤器时存储过
  • 在 Vue.js 中隐藏 div onclick

    以下 jQuery 的 Vue js 等价物是什么 btn click function hideMe hide jQuery 开箱即用 而 Vue js 则不然 要初始化 Vue js 组件或应用程序 您必须将该组件及其数据绑定到模板内的
  • 左侧导航菜单上部隐藏

    当滚动到页面最底部时 左侧导航菜单的顶部将被隐藏 The image before scrolling is shown below 滚动后的效果如下图 我不确定此问题的确切原因 因此我将不胜感激任何有关识别和解决该问题的建议或帮助 为了确
  • 不知道如何预览我生成的 Nuxt3 应用程序

    我刚刚在静态模式下创建了一个 Nuxt3 但我不想每次都将其推送到 Netlify 进行预览 这是我的nuxt config js 没有改变 import defineNuxtConfig from nuxt export default
  • Laravel Vue 组件只能传递数字?

    在我的 UserMenu vue 中我写道 export default props nameVal data return 并在blade php中
  • Vue 和 Vuex:处理依赖的计算属性

    我的应用程序是一个使用 Vuex 在 Vue 中构建的精简电子表格 关键组件是TableCollection Table and Row The TableCollection有一个包含多个的数组Table对象 每个Table有一个包含多个
  • (thread_id_key != 0x7777),函数 find_thread_id_key,文件 ../src/coroutine.cc,第 134 行

    我正在开发一个vue程序 我尝试过npm run serve 然后我得到了这个 66 building 670 715 modules 45 active Users bytedance go src code byted org ad o

随机推荐

  • 理解数据库范式

    数据库范式是数据库 设计 中必不可少的知识 没有对范式的理解 就无法设计出高效率 优雅的数据库 甚至设计出错误的数据库 而想要理解并掌握范式却并不是那 么容易 教科书中一般以关系代数的方法来解释数据库范式 这样做虽然能够十分准确的表达数据库
  • 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 绑定类名之后使用