1. Comparison of renderings
Before modification:
You can clearly see that the drop-down box is positioned higher than the input box and has a small triangle.
After modification:
It can be seen that there are obvious changes in the height, and I also modified the icon and the border style when selected (I will not write this part here, mainly Write how to adjust the position)
2. Modify ideas
If you know about theelement library, you can know that whether it is the drop-down part of the element-ui or element-plus component The style .el-popper is used, but this style is added under the body element by default, not under the parent element, and is passed through absoluteAbsolute positioning calculates the position. inelement-plusel-selectThe following two attributes can be modified:
Disable the drop-down box from being inserted into the body element, but insert it into the parent element. Examples include:
<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>
Style code:
// 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;
}
}
The most important part of the code is:teleported="false". I tried it here:popper-append-to-body="false" . This attribute doesn’t seem to work, so I suggest you use another one. , and then you can modify the position through .el-popper. Note that I use scss here, so I use nested syntax. If you just modify the style of the drop-down box, you can use the popper-class attribute to customize a style. Note that I am using the method of globally modifying the style here. If you want to modify the style through scope, then first insert the drop-down box into the parent element and then use the penetrating method to modify the style. However, I think if the penetration is not very good, you can also directly write a unique style class to modify it. Be careful not to conflict. However, it is suggested that it would be better to unify the styles of the UI during design.