使用el-select
下拉菜单时突然发现最后一项显示不完整,如下:
发现是margin
值不合理导致的显示不全,在尝试使用::v-deep
与/deep/
选择修改下拉选项的margin-bottom: 0 !important
,发现未有成效。
经过分析页面的DOM结构,el-select
默认挂在在了body上,导致无法选中进行样式修改。
最后,通过设置:popper-append-to-body="false"
字段,使el-select
挂载在当前页面,即可进行选中修改样式。
<el-form-item label="类型">
<el-select v-model="form.type" size="mini"
:popper-append-to-body="false"
placeholder="请选择" @change="getDate($event)">
<el-option
v-for="item in type"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
/*下拉框最后一个显示不完全*/
/deep/.el-select-dropdown__wrap.el-scrollbar__wrap {
margin-bottom: 0 !important;
}
效果