当前位置：首页 > news >正文

【Axure教程】表格嵌套卡片

news 来源：原创 2025/4/25 6:05:25

今天教大家制作表格嵌套卡片的原型模版，可以点击加号或减号展开或收起对应部门下的员工卡片信息。这个表格是用中继器制作的，所以使用也很方便，在中继器表格里维护数据，即可自动生成交互效果，具体效果可以打开下方原型地址体验

【原型效果】

【原型预览含下载地址】

https://axhub.im/ax11/38d7403ca521bca7/?g=1&p=表格嵌套卡片

【制作教程】

一、材料准备

1.1表格表头的制作

我们用多个矩形元件制作即可，每个矩形对应一格，如下图所示摆放：

1.2表格内容的制作

我们用多个矩形元件和加减号按钮制作，矩形每一格的尺寸宽度和表头对应，我们只需要做一行，在表格最左侧我们增加+号和减号按钮，可以放在同一个动态面板下两个不同的状态中，总体布局如下图所示摆放：

1.3卡片内容的制作

主要元件包括，图片、文本标签、矩形，如下图所示摆放：

1.4中继器表格

我们把表格内容和卡片放在同一个动态面板里的两个状态页里，表格对应的是主表内容页面，卡片对应的是次表内容页面，然后将动态面板放在中继器里。

中继器表格里我们需要设置一下多列内容：

column1~6列：对应表格第一列到第六列的内容

k1~12列：对应卡片里对应文本显示的内容

pic列：对应卡片里的图片

zhankai列：控制子级卡片是否展开

fuji列：该行内容对应的父级，例如刘一是采购部的，那刘一这行父级对应的就是采购部。

二、交互制作

1.1将表格的值设置到对应元件

如果是Axure10或以上的版本，我们点击中继器表格对应列里的连接按钮，选择对应的元件即可，如果是Axure8或9，就要在中继器每项加载时，用设置文本的交互，将对应的值设置到指定元件，然后用设置图片的交互，将图片设置到图片元件里。

1.2控制显示表格或卡片

我们根据有没有fuji列里有没有父级判断，如果没有父级，案例中就是部门对应的表格数据；如果有父级，案例中就是员工对应的卡片数据。所以如果fuji列的内容不为空，我们用设置面板的交互，设置动态面板显示的页面为表格内容所在的主表内容页，否则就显示卡片内容所在的次表内容页。

1.3控制展开或收起

我们定义，如果zhankai列的值为展开，就显示卡片内容，这里分成两部分，如果是父级，就是表格对应的行，那应该显示的减号按钮，应为已经打开了，所以我们用设置面板状态的交互，设置按钮所在的面板为减号按钮页；如果是子级，就是卡片内容，当zhankai列内容为展开我们就默认显示卡片内容即可，否则就隐藏整个卡片内容的组合。

当鼠标单击按钮所在的动态面板时，我们也是要根据zhankai列的值来讨论，如果zhankai列的值不是展开，就是收起的状况，我们相当于要把他变成展开，所以我们用更新行的交互，将当前行以及对应的子级行的状态都更新为展开；如果zhankai列的值是展开，就是以及打开的状况，我们就要将他收起，所以我们用更新行的交互，将当前行以及对应的子级行的状态更新为收起。