前言
很多朋友需要在Axure中继器中实现类似Excel合并单元格的效果,今天就给大家带来一个非常简单的方法。
教程
我们就以2024欧洲杯的A组B组来做个演示,首先按下图放置好元件:
中继器内容:group表示分组,gRows表示向下合并几个单元格,数字为0的将被合并,team表示队伍名称。
注意:这里有个非常非常非常重要的一点,仔细观察图片,中继器的“Fit Content(适应HTML内容)”配置的勾是取消掉的。如果你没有取消这个对勾,那你后面预览时会串行。
然后初始化显示数据:
这时哪些列需要向下合并单元格(比如本例的group元件),加入交互:
- 载入时
- 如果Item.gRows为0时
- 说明是将被合并的单元格,那么隐藏元件
- 否则
- 设置元件的高度为[[Item.gRows*This.Height]]
- 如果Item.gRows为0时
这样就完成了,是不是非常简单。
结语
本例演示是向下合并单元格,所在是改变的是高度,如果是向右合并单元格,那么就可以改变宽度。
如果同时有横向合并和纵向合并字段,通过合适的配置,本方法可以实现同时横向合并及纵向合并。
如果觉得我的教程做的不错呢,欢迎关注、收藏、转发、捐赠,谢谢。
原文链接:在Axure中实现合并单元格效果
转载请注明:最InのAxure » 在Axure中实现合并单元格效果