返回 导航

其他

hangge.com

Vue.js - 修改ElementUI的select选择器组件高度的方法

作者：hangge | 2025-01-22 08:38
    我在之前文章中介绍了如何调整 Element UI 中 Input 输入框的高度（点击查看）。本文介绍如何修改 Select 下拉选择框的高度尺寸。

1，使用内置的尺寸样式

（1）我们知道，el-select 组件可通过 size 属性指定输入框的尺寸，除了默认的大小外，还提供了 medium、small 和 mini 三种尺寸。
<el-select size="medium">
  <el-option label="1秒" value="1000"></el-option>
  <el-option label="2秒" value="2000"></el-option>
  <el-option label="3秒" value="3000"></el-option>
</el-select>

（2）各尺寸的对比如下：

2，通过覆盖样式调整高度

（1）如果需要对高度进行精确的设置，就需要使用深度选择器覆盖 Element UI 的默认样式。具体方法同之前修改 input 组件的高度类似，不过特别要注意右侧的箭头图标也要设置居中样式，否则会出现偏移现象。具体代码如下：
<template>
  <div>
    <el-select class="my-select">
      <el-option label="1秒" value="1000"></el-option>
      <el-option label="2秒" value="2000"></el-option>
      <el-option label="3秒" value="3000"></el-option>
    </el-select>
  </div>
</template>
<style scoped>
  /* selecte 框的高度设置*/
  /deep/ .my-select .el-input__inner {
    height: 20px;
  }

  /* 设置右侧箭头按钮位置 */
  /deep/ .my-select .el-input__suffix {
    top: calc(50% - 8px);
  }

  /deep/ .my-select .el-input__icon {
    line-height: inherit;
  }

  /deep/ .my-select .el-input__suffix-inner {
    display: inline-block;
  }
</style>

（2）运行效果如下：
评论

全部评论（0）

回到顶部