解决Vue中设置el-select的高度不生效问题

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