element-plus修改el-select下拉框的位置

沈清秋.

已于 2023-06-06 10:38:15 修改

阅读量4k

点赞数 4

分类专栏： Element-Plus 文章标签： javascript vue.js css elementui

于 2023-05-16 19:42:09 首次发布

本文链接：https://blog.csdn.net/qq_43651168/article/details/130712253

版权

Element-Plus 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、效果图对比

没有修改之前：
在这里插入图片描述
可以明显看到下拉框的位置距离输入框较高，并且有小三角形。

修改之后：
在这里插入图片描述
可以看出高度上明显有变化，并且我还修改了图标、选中时的边框样式（这边我这部分就不写了，主要写如何调整位置）

二、修改思路

对于element库有了解的话可以知道无论是element-ui还是element-plus组件中关于下拉的部分都是用了.el-popper这个样式，但是这个样式默认是加在body元素下的，并不是父级元素下，并且是通过absolute绝对定位计算位置。在element-plus的el-select有如下两个属性可以修改：
在这里插入图片描述
把下拉框禁止插入到body元素中，而是插入到父级元素中。示例如下：

<el-select
   class="search-select"
   v-model="queryParams.exceptionType"
   placeholder="选择工作状态"
   :suffix-icon="IconDropDown"
   clearable
   :fit-input-width="true"
   popper-class="search-select-option"
   :teleported="false"
 >
   <el-option label="正常" value="0"></el-option>
   <el-option label="异常" value="1"></el-option>
 </el-select>

样式代码：

// el-select 自定义样式（用于选择框）
.search-select {
  .el-input__wrapper {
    border-radius: 8px;
    height: 44px;
    padding: 0 10px 0 10px;
  }
  .el-input__suffix-inner>:first-child {
    margin: 0;
    width: 32px;
    height: 44px;
  }
  .el-popper {
    top: 46px !important;
  }
}

.search-select-option {
  box-shadow: none !important;
  border-radius: 8px;
  .el-select-dropdown {
    border: 1px solid #147AFC !important;
    box-shadow: none !important;
    border-radius: 8px;
  }
  .el-select-dropdown__item {
    padding: 0;
    margin: 0 16px;
    height: 39px;
    line-height: 39px;
    border-bottom: 1px solid #E8EBF0;
    color: #84878D;
    font-size: 16px;
    font-family: 'AlibabaPuHuiTi-2-55-Regular';
    font-weight: normal;
  }
  .el-select-dropdown__item:last-child {
    border-bottom: none;
  }
  .el-select-dropdown__list {
    margin: 9px 0 !important;
  }
  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background-color: transparent;
  }
  .el-select-dropdown__item.selected {
    color: #147AFC;
  }
}

最主要的代码部分就是:teleported="false"，我这边试了下:popper-append-to-body="false" 这个属性好像不太管用，所以还是建议大家用另外一个，然后就可以通过.el-popper进行修改位置了。注意我这边用的是scss，所以用了嵌套的语法。如果只是修改下拉框的样式，那么可以使用popper-class属性自定义一个样式。注意我这里是用的全局修改样式的方法，如果是想要通过scope修改样式，那么先把下拉框插入到父级元素后，用穿透的方法进行修改样式。不过我觉得如果穿透用的不是很好的话也可以直接写独一的样式类进行修改也行，注意不要冲突。不过建议还是UI在设计的时候样式进行统一会比较好。