一、痛点分析:

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

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

滚动后(头部没了):

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

二、预期目标:

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

三、达到效果:

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

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

四、代码解读:

搜索区域代码,默认为隐藏:

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

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

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

五、解决办法:

主内容区域,去掉外层滚动条:

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

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

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

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

技术交流:

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

相关文章: