FR报表下拉框高度（JS添加css样式方式）调整

FR报表下拉框高度调整解决方案

问题描述

在FR报表开发中，点击下拉框按钮后，下拉选项列表的高度太小，用户体验不佳。直接使用 $('.fr-combo-list').css("height","400px") 设置高度往往不生效，因为此时下拉选项还没有渲染到DOM中。

解决方案：jQuery动态添加CSS样式（推荐）

通过jQuery动态创建style标签并添加到页面头部，这样可以确保样式在下拉框出现时立即生效：

// 使用jQuery添加样式
function addComboStylesWithJQuery() {
    if (!$('#combo-height-style').length) {
        $('<style id="combo-height-style">')
            .text(`
                .fr-combo-list {
                    height: 400px !important;
                    max-height: 400px !important;
                    overflow-y: auto !important;
                }
            `)
            .appendTo('head');
    }
}

使用方法：

• 写在在页面加载结束后事件就行

优点：

• 代码简洁，易于维护
• 性能优秀，一次设置持久有效
• 兼容性好，适用于大多数场景
• 避免了DOM监听的复杂性

其他可选方案

写一个css文件放到服务器上，然后引用这个css文件（理论上应该是最合适的，但是考虑到操作服务器文件有时候不一定方便）;其他如轮询监听等方式（搞复杂了）。