el-select 调整宽高

qq_41562817

已于 2023-12-07 15:13:01 修改

阅读量7.6k

点赞数 6

分类专栏：组件库文章标签： elementui

于 2023-12-07 15:10:53 首次发布

本文链接：https://blog.csdn.net/qq_41562817/article/details/134829077

版权

组件库专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在ElementUI的el-select组件中通过行内样式和CSS调整宽度至200px，以及如何将默认高度调整为60px，同时保持右侧按钮居中显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、宽度调整：

1. 行内样式

<el-select v-model="op1" style="width: 200px;"></el-select>

2. 添加样式即可

.el-select { width : 200px; }

二、高度调整：默认高度为40px

.el-select {
  height: 60px;

  /deep/ .el-input {
    .el-input__inner {
      height: 60px;
    }

    .el-input__prefix,
    .el-input__suffix {
      height: 60px;
    }

    /* 下面设置右侧按钮居中 */
    .el-input__suffix {
      top: 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
    }

    /* 输入框加上上下边是 60px + 2px =62px */
    .el-input__icon {
      line-height: 62px;
    }
  }
}