效果图
- 多个下拉,flex 均等分布,改变局部样式,不影响全局
![](https://img2022.cnblogs.com/blog/2833653/202208/2833653-20220810082653339-327313677.png)
![](https://img2022.cnblogs.com/blog/2833653/202208/2833653-20220810082027392-1373689224.png)
代码
<el-row class="right-main-right">
<el-form :model="inputForm">
<el-form-item>
<el-select
v-model="inputForm.one"
placeholder="请选择分配指标"
:popper-append-to-body="false"
:disabled="normFlag !== '可靠性'"
@change="handleSelectChange"
>
<el-option
v-for="item of sixIndexArr"
:label="item.label"
:value="item.value"
:key="item.value"
></el-option>
</el-select>
</el-form-item>
</el-form>
</el-row>
.right-main-right {
width: 45%;
height: 100%;
margin-left: 5%;
>>>.el-form {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
>>>.el-form-item {
flex: 1;
margin-bottom: 15px;
}
>>>.el-form-item__content {
width: 100%;
height: 100%;
}
// 下拉框占满位置
>>>.el-select {
width: 100%;
height: 100%;
.el-input {
width: 100%;
height: 100%;
.el-input__inner {
width: 100%;
height: 100% !important;
background-color: #f4f6fc;
border-color: #6db4fe;
color: #707070;
font-size: 14px;
padding: 0 15px;
}
// 下拉框右侧图标
.el-input__suffix {
.el-input__suffix-inner {
i {
color: #4169e1;
font-weight: 700;
}
}
}
}
// 下拉列表
.el-select-dropdown {
background-color: #f4f6fc;
border-color: #6db4fe !important;
margin: 0;
padding: 0;
left: 0 !important;
.el-select-dropdown__list {
// 下拉的每一条数据
.el-select-dropdown__item {
color: #707070;
margin: 0 10px;
padding: 0 10px;
border-radius: 8px;
}
// 下拉选中
.selected {
background-color: #beceff;
color: #000;
font-weight: initial !important;
}
// 下拉移入
.hover {
background-color: #beceff;
color: #000;
}
}
// 去掉顶部小三角
.popper__arrow {
display: none;
}
}
}
}