东莞市手机网站建设品牌_it培训机构骗局深圳_网站排名软件有哪些_微信推广引流方法

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

<template><div id="login"><el-select v-model="role"><el-option label="管理员" value="admin"></el-option><el-option label="教师" value="teacher"></el-option><el-option label="学生" value="student"></el-option></el-select></div>
</template><style lang="scss" scoped>.el-select{height: 50px !important;}
</style>

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

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

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

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

：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-select的高度修改成功