在报表类看板设计过程中会遇到需要将表格铺满全屏的情况,但如果只是将报表宽度和表格宽度高度设置成固定像素值,会引起不同分辨率情况下无法自适应的情况,即便进行缩放能全屏显示,但也会导致字体放大缩小而后显示模糊等衍生问题。本文主要介绍如何设置报表内容让表格自适应屏幕大小,呈现出和系统自带列表类似的效果。
在表格属性配置中需遵循编辑器宽度约束,禁止超出容器边界。超宽布局将导致:
如需实现自适应全屏表格,请按以下标准配置:
1.设置看板宽度高度为100%,点击报表属性的宽度高度单位可在像素(px)和百分比(%)之间切换
2.设置表格控件的宽度为100%,高度为100vh,1vh就是当前屏幕可见高度的1%,但高度100%对表格初始化时会无法撑开进而无法显示正确的高度,100vh则没有这个问题。
由此你就可以获得一个满屏看板,呈现效果接近系统自带列表,且不受屏幕分辨率影响:
注意:如果看板类报表需要启用自适应缩放的请不要使用百分比单位,会引起宽高显示异常。控件不可超出看板宽高,会不显示。
如果你不想这么设置,坚持用固定像素设置报表,也可以直接在看板地址后面加url参数size=zoom,页面会自动根据宽高进行缩放,但是缩放后字体会变得模糊。缩放参数需要加在url的参数部分,加在hash后面不会生效。(即:加在#前面,url参数第一个参数用“?”,后续参数用“&”连接。)