积木&Ruoyi平台滚动条显示优化

一、痛点分析：

积木开发平台（前台源于若依UI）的表单显示界面，右侧出现滚动条，下拉时搜索区域、表单按钮、表头都会跟着滚动，对表单的各项操作会非常不方便，如下所示：

滚动后（头部没了）：

二、预期目标：

• 去掉主内容区外层滚动条
• 表头位置固定，表格内容滚动
• 窗口大小变化时表格高度自动调整
• 搜索区域显示隐藏时自动调整表格高度
• 表格高度始终占满右侧主内容区域，只有一个表格内容的滚动条

三、达到效果：

四、代码解读：

搜索区域代码，默认为隐藏：

bootstraptable的js中，控制点击搜索按钮时切换select-table的儿子显示/隐藏：

五、解决办法：

主内容区域，去掉外层滚动条：

grid_h模板中，控制窗口自动变化，要考虑窗口大小变化、搜索区域显示隐藏时的变化，已全部支持：

 

技术交流：