今天,在做东西是发现form表单下的,select框下拉框的内容显示不全,后来对照了一下element中的el-select代码,发现代码一样。可以肯定的是样式问题,但是不知道为什么会这样,有可能是引入了第三方样式,引起的样式冲突。

那只有修改el-select的样式,通过popper-class给el-select添加class值 popper-class=“select-down”。

代码如下:
<el-select
v-model="form.ower"
clearable
@change="ower(form.ower,form.uuid)"
placeholder="请选择负责人"
:disabled="editPermission"
style="width: 100%;"
popper-class="select-down"
>
<el-option
v-for="item in owerList"
:key="item.uuid"
:label="item.displayName"
:value="item.uuid"
>
</el-option>
</el-select>
css样式:
<style>
.select-down {
padding-bottom: 6px;
}
.select-down .el-scrollbar{
padding-bottom: 11px;
}
</style>
文章描述了一个在开发过程中遇到的前端问题,即form表单中的select下拉框内容显示不完整。作者怀疑是由于引入的第三方样式导致的样式冲突。为了解决这个问题,作者决定通过添加自定义的popper-classselect-down到el-select组件,并在CSS中调整相应的样式(.select-down和.select-down.el-scrollbar),以增加底部的padding来确保内容完全可见。
1万+

被折叠的 条评论
为什么被折叠?



