解决iview 的Select下拉框选项在FormItem中错位的问题

前言:在使用iview的过程中,我遇到这样一个问题,在Form组件的FormItem中使用Select下拉框组件。但是当弹出框超过一屏需要滚动时,select的下拉选项会出现错位,留在页面中(下图1为正常,图2为滚动后,下拉选项错位 留在页面中。)

图1:
解决iview 的Select下拉框选项在FormItem中错位的问题_第1张图片

图2:
解决iview 的Select下拉框选项在FormItem中错位的问题_第2张图片
在分析组件代码后,发现 ivu-select-dropdown 中的top样式会随页面滚动不断加大(图3所示):

图3:
解决iview 的Select下拉框选项在FormItem中错位的问题_第3张图片

解决方案

覆盖作者的原来样式,固定 ivu-select-dropdown 中 top值为33px,下拉选项就不会随页面滚动了。
注:设置transfer属性无效
即:

div>>>.ivu-select .ivu-select-dropdown{
     
    top: 33px !important;
}

你可能感兴趣的:(vue,css)