隐藏饿了么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不会生效所以需要:

javascript 复制代码
:popper-append-to-body="false"

完整html代码

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

于是el-select-dropdown部分就没有插入了最外层body而是和el-select组件中的input也就是显示已选值的框并列

这时候再设置css:

javascript 复制代码
 ::v-deep  .el-select-dropdown {
    display: none !important;
  }

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

相关推荐
梦想是准点下班1 分钟前
androidStudio打包,我又又又忘了
前端
槑有老呆2 分钟前
栈队列链表,三个故事就懂了
前端
ViavaCos19 分钟前
pnpm v11 的安全策略,让我踩了个坑
前端
To_OC20 分钟前
从一段定时器代码,重新捋清 JS 同步、异步与 Promise
前端·javascript·代码规范
持敬chijing22 分钟前
Web渗透之前后端漏洞-XSS漏洞原理攻击防御全流程
前端·安全·web安全·网络安全·网络攻击模型·安全威胁分析·xss
程序员黑豆29 分钟前
AI全栈开发 - Java:注释
前端·后端·ai编程
痕忆丶38 分钟前
Typora 的替代marktext,marktext切换中文
前端
拙慕JULY43 分钟前
小程序返回 base64 文件报错
开发语言·javascript·小程序
数据知道44 分钟前
字体与排版防线:ClientRects 与系统字体枚举的底层拦截与伪造
javascript·数据采集·指纹浏览器·风控·浏览器指纹
小二·1 小时前
Spring Boot 3 + Vue 3 全栈开发实战
vue.js·spring boot·后端