最新消息:

在Axure中实现合并单元格效果

Axure基础教程 Jorkin 220浏览

前言

很多朋友需要在Axure中继器中实现类似Excel合并单元格的效果,今天就给大家带来一个非常简单的方法。

教程

我们就以2024欧洲杯的A组B组来做个演示,首先按下图放置好元件:

中继器内容:group表示分组,gRows表示向下合并几个单元格,数字为0的将被合并,team表示队伍名称。

注意:这里有个非常非常非常重要的一点,仔细观察图片,中继器的“Fit Content(适应HTML内容)”配置的勾是取消掉的。如果你没有取消这个对勾,那你后面预览时会串行。

然后初始化显示数据:

这时哪些列需要向下合并单元格(比如本例的group元件),加入交互:

  1. 载入时
    • 如果Item.gRows为0时
      • 说明是将被合并的单元格,那么隐藏元件
    • 否则
      • 设置元件的高度为[[Item.gRows*This.Height]]

这样就完成了,是不是非常简单。

结语

本例演示是向下合并单元格,所在是改变的是高度,如果是向右合并单元格,那么就可以改变宽度。

如果同时有横向合并和纵向合并字段,通过合适的配置,本方法可以实现同时横向合并及纵向合并。

如果觉得我的教程做的不错呢,欢迎关注、收藏、转发、捐赠,谢谢。

原文链接:在Axure中实现合并单元格效果

转载请注明:最InのAxure » 在Axure中实现合并单元格效果