隐藏饿了么el-select组件的el-select-dropdown部分,只使用el-select的显示框

隐藏饿了么el-select组件的el-select-dropdown部分,只使用el-select的显示框

问题: 由于el-select组件的el-select-dropdown部分是自动插入在最外层Body上的,所以在当前组件的scoped中让el-select-dropdown组件display:none不会生效所以需要:

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

完整html代码

 <el-select v-model="value1" multiple placeholder="请选择" :popper-append-to-body="false"></el-select>

于是el-select-dropdown部分就没有插入了最外层body而是和el-select组件中的input也就是显示已选值的框并列
在这里插入图片描述
这时候再设置css:

 ::v-deep  .el-select-dropdown {display: none !important;}

.el-select-dropdown 就成功隐藏了 !

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

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

相关文章

TiDB 7.5.0 LTS 高性能数据批处理方案

过去&#xff0c;TiDB 由于不支持存储过程、大事务的使用也存在一些限制&#xff0c;使得在 TiDB 上进行一些复杂的数据批量处理变得比较复杂。 TiDB 在面向这种超大规模数据的批处理场景&#xff0c;其能力也一直在演进&#xff0c;其复杂度也变得越来越低&#xff1a; ○ 从…

11.CSS3的媒介(media)查询

CSS3 的媒介(media)查询 经典真题 如何使用媒体查询实现视口宽度大于 320px 小于 640px 时 div 元素宽度变成 30% 媒体查询 媒体查询英文全称 Media Query&#xff0c;顾名思义就是会查询用户所使用的媒体或者媒介。 在现在&#xff0c;网页的浏览终端是越来越多了。用户可…

C++:string类

标准库中的string类 string类 1. 字符串是表示字符序列的类 2. 标准的字符串类提供了对此类对象的支持&#xff0c;其接口类似于标准字符容器的接口&#xff0c;但添加了专门用于操作单字节字符字符串的设计特性。 3. string类是使用char(即作为它的字符类型&#xff0c;使用…

ChatGPT 是什么

文章目录 一、ChatGPT 是什么二、ChatGPT的发明者三、ChatGPT的运作方式四、ChatGPT的技术五、ChatGPT的优势六、ChatGPT的局限性七、ChatGPT的应用八、ChatGPT的未来九、总结 一、ChatGPT 是什么 OpenAI的ChatGPT&#xff0c;即Chat Generative Pre-Trained Transformer&…

3个精美的wordpress企业网站模板

WordPress企业网站模板 https://www.zhanyes.com/qiye/6305.html WordPress企业官网模板 https://www.zhanyes.com/qiye/6309.html WordPress律师模板 https://www.zhanyes.com/qiye/23.html

SQL注入漏洞解析--less-2

首先我们进入第二关 思路&#xff1a; 1.先判断是什么类型的注入 2.根据类型我们在找注入点 步骤&#xff1a; 1.提示我们输入id数字&#xff0c;那我们先输入1猜一下 2.这里正常回显&#xff0c;当我们后边加上时可以看到报错&#xff0c;且报错信息看不到数字&#xff0…

轻松掌握opencv的8种图像变换

文章目录 opencv的8种图像变换1. 图像放大、缩小2. 图像平移3. 图像旋转4. 图像仿射变换5. 图像裁剪6. 图像的位运算&#xff08;AND, OR, XOR&#xff09;7. 图像的分离和融合8. 图像的颜色空间 opencv的8种图像变换 1. 图像放大、缩小 我们先看下原图 import cv2 import ma…

基于java+springboot+vue实现的美食信息推荐系统(文末源码+Lw)23-170

1 摘 要 使用旧方法对美食信息推荐系统的信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在美食信息推荐系统的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。这次开发…

Shell好用的工具: cut

目标 使用cut可以切割提取指定列\字符\字节的数据 介绍 cut 译为“剪切, 切割” , 是一个强大文本处理工具&#xff0c;它可以将文本按列进行划分的文本处理。cut命令逐行读入文本&#xff0c;然后按列划分字段并进行提取、输出等操作。 语法 cut [options] filename opti…

树中枝繁叶茂:探索 B+ 树、B 树、二叉树、红黑树和跳表的世界

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 树中枝繁叶茂&#xff1a;探索 B 树、B 树、二叉树、红黑树和跳表的世界 前言B树和B树B树&#xff08;Binary Tree&#xff09;&#xff1a;B树&#xff08;B Plus Tree&#xff09;&#xff1a;应用场…

STM32Cubemx TB6612直流电机驱动

一、TB6612FNG TB6612是一个支持双电机的驱动模块&#xff0c;支持PWM调速。PWMA、AIN1、AIN2 为一组控制引脚&#xff0c;PWMA 为 PWM 速度控制引脚&#xff0c;AIN1、AIN2 为方向控制引脚&#xff1b;PWMB、BIN1、BIN2 为一组控制引脚&#xff0c;PWMB 为 PWM 速度控制引脚&…

【力扣hot100】刷题笔记Day11

前言 科研不顺啊......又不想搞了&#xff0c;随便弄弄吧&#xff0c;多花点时间刷题&#xff0c;今天开启二叉树&#xff01; 94. 二叉树的中序遍历 - 力扣&#xff08;LeetCode&#xff09; 递归 # 最简单递归 class Solution:def inorderTraversal(self, root: TreeNode) …

idea运行项目时右下角弹出“Lombok requires enabled annotation processing”

文章目录 错误描述原因分析解决方式参考 错误描述 Lombok requires enabled annotation processing&#xff1a;翻译过来就是Lombok 需要启用注释处理 原因分析 idea安装了Lombok插件&#xff0c;但有些设置未做。 解决方式 参考 idea配置和使用Lombok

【FPGA】高云FPGA之数字钟实验->HC595驱动数码管

高云FPGA之IP核的使用 1、设计定义2、设计输入2.1 数码管译码显示2.2 74HC595驱动2.3 主模块设计 3、分析和综合4、功能仿真6.1 hex8模块仿真6.2 HC595模块 5、布局布线6、时序仿真7、IO分配以及配置文件&#xff08;bit流文件&#xff09;的生成8、配置&#xff08;烧录&#…

代码检测规范和git提交规范

摘要&#xff1a;之前开发的项目&#xff0c;代码检测和提交规范都是已经配置好的&#xff0c;最近自己新建的项目就记录下相关配置过程。 1. ESlint配置 2013年6月创建开源项目&#xff0c;提供一个插件化的JavaScript代码检测工具&#xff0c;创建项目是生成的eslintrc.js文…

【算法分析与设计】

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;算法分析与设计 ⛺️稳中求进&#xff0c;晒太阳 题目 编写一个函数&#xff0c;输入是一个无符号整数&#xff08;以二进制串的形式&#xff09;&#xff0c;返回其二进制表达式中数字位…

如何使用Express框架构建一个简单的Web应用

在这个数字化时代&#xff0c;Web应用的需求越来越多样化和复杂化。在前端开发领域&#xff0c;Express框架作为一个快速、灵活的Node.js Web应用程序框架&#xff0c;拥有强大的功能和丰富的生态系统&#xff0c;深受开发者们的青睐。本篇博客将带您一步步探索如何使用Express…

Bert基础(四)--解码器(上)

1 理解解码器 假设我们想把英语句子I am good&#xff08;原句&#xff09;翻译成法语句子Je vais bien&#xff08;目标句&#xff09;。首先&#xff0c;将原句I am good送入编码器&#xff0c;使编码器学习原句&#xff0c;并计算特征值。在前文中&#xff0c;我们学习了编…

代码随想录算法训练营第四十天|343. 整数拆分、96. 不同的二叉搜索树。

343. 整数拆分 题目链接&#xff1a;整数拆分 题目描述&#xff1a; 给定一个正整数 n &#xff0c;将其拆分为 k 个 正整数 的和&#xff08; k > 2 &#xff09;&#xff0c;并使这些整数的乘积最大化。 返回 你可以获得的最大乘积 。 解题思路&#xff1a; 1、确定dp数组…

flink内存管理,设置思路,oom问题,一文全

flink内存管理 1 内存分配1.1 JVM 进程总内存&#xff08;Total Process Memory&#xff09;1.2 Flink 总内存&#xff08;Total Flink Memory&#xff09;1.3 JVM 堆外内存&#xff08;JVM Off-Heap Memory&#xff09;1.4 JVM 堆内存&#xff08;JVM Heap Memory&#xff09;…