el-select设置高度没用？教你一招真正生效的方法

网站建设厦门萤点网络科技 2026-06-24 00:15 2 0

el-是 UI框架中的一个选择器组件，它允许用户从多个选项中选择一个或多个项目。但这里确存在一个小坑，我们可以看到直接修改el-的高度是无法生效的...

el-是 UI框架中的一个选择器组件，它允许用户从多个选项中选择一个或多个项目。但这里确存在一个小坑，我们可以看到直接修改el-的高度是无法生效的

其实要想修改下拉框的高度，必需要修改内部的css样式

我们使用浏览器可以看到下拉框内部有一个类el--，

Vue 2.x 提供的/deep/关键字穿透组件的作用域，以影响子组件的样式

    .el-select /deep/ .el-select__wrapper{
      height: 50px;
    }

Vue el-select高度不生效解决方法_el-select高度修改_select设置高度没用

：Vue 2.6+ 到Vue 3 初期提供了全新的穿透样式关键字::v-deep，修改样式

    ::v-deep .el-select .el-select__wrapper{
      height: 50px;
    }

在最新的 Vue 3 和构建工具（如 Vite）中，::v-deep 的用法已经被视为过时，推荐使用 :deep() 伪类来代替。

    :deep(.el-select .el-select__wrapper){
      height: 50px;
    }

至此el-的高度修改成功

到此这篇关于解决Vue中设置el-的高度不生效问题的文章就介绍到这了,更多相关vue el-高度不生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

.el-select el- 修改高度 Vue deep