1. 为什么表格要用中继器静态表格的痛与中继器的解法做产品原型做了这么多年我见过太多人在Axure里手动画表格画几行矩形、拖几条线、复制粘贴单元格一做就是一上午。当时看着挺像回事可需求一变就全完了——加一行数据要手动复制一排矩形改一条内容要一个个双击修改表格稍微长一点拖动对齐就能让人崩溃。我第一次接触中继器Repeater时其实也是一脸抗拒。这玩意儿的交互逻辑和Axure里其他元件完全是两种思路学习曲线陡文档又少中文社区讲得好的教程也不多。但硬着头皮用了一周之后我基本给团队定了条规矩凡是表格、列表、重复卡片这类组件一律用中继器别手画。原因很简单——中继器本质上是数据 模板 批量生成的组合它把表格里的每一行都变成了一份可以编程控制的数据记录增删改查、筛选排序全都通过交互面板几行语句就能搞定这是手画表格根本做不到的。这篇东西不适合刚打开Axure连矩形都拖不利索的纯小白但如果你已经会用Axure的基本元件和交互正在为表格怎么做才能又快又改得动发愁那这篇应该能帮你省下不少摸索时间。我尽量把每一步都说清楚包括为什么这么做、不这么做会踩什么坑。2. 中继器工作原理拆解数据仓库与批量生产线的隐喻很多教程上来就让你拖一个中继器进去然后告诉你点这里点那里可一旦出现问题你根本不知道错在哪只能瞎试。我建议动手之前先花十分钟搞清楚中继器到底是个什么东西。2.1 先理解数据集表格的虚拟仓库中继器自带一个数据集Dataset你可以把它理解成一张Excel表里面是一个二维表格列是字段名行是每一条记录。默认情况下Axure给中继器预置了三列数据分别是Column0、Column1、Column2每列有两三行示例数据。这块面板的位置在右侧检视区的样式旁边点开数据集标签就能看到。关键点在于中继器在画布上显示出来的每一行内容其实是数据集里的一条记录。样式、颜色、文本内容都不是你手动摆上去的而是由数据驱动的。这就像一条生产线数据集是仓库里的原料清单中继器模板是生产线上的机器你把原料清单放进机器它按照模板批量产出成品行。2.2 模板生产线上的样板间双击中继器元件会进入一个独立的编辑页面这就是中继器的模板页面。你在这里画的任何东西都会作为每一行的蓝图被重复渲染。模板里可以放文本标签、矩形、按钮、图片框甚至嵌套另一个中继器。这里有个特别容易让人困惑的点你在模板页面里看到的内容在最终画布上会被重复很多次。有一个专门的列表项Item概念每个列表项对应数据集中的一行记录。中继器在画布上的宽度、高度决定了它一次性显示多少个列表项、每项之间的间隔是多少。举个例子如果你在模板里画了一个宽800像素的行模板那最终表格每一行都是800像素宽如果你把中继器本身的高度设成自动它会根据数据条数自动扩展高度全部显示出来。2.3 字段绑定数据到界面的管道模板页面上的文本标签默认显示的是Label这类占位文本。要让它们真正显示数据集里的内容需要手动绑定选中模板里的文本标签在右侧检视区找到编辑文本图标就是那个带fx的小按钮点开后切换到局部变量或直接用[[Item.Column0]]这样的表达式。这里的Item代表当前这一行记录Column0是字段名。我第一次用的时候栽了个大跟头数据集里的字段名写的Column0我在表达式里写[[Item.column0]]结果全表空白。Axure的字段名是区分大小写的Column0和column0是两码事。这个细节特别坑但养成统一命名习惯之后基本不会再犯。还有一个理解重点中继器的显示逻辑不是有多少数据就显示多少行而是有多少数据模板就被复制多少份。如果你的数据集里只有两条记录但中继器在画布上拖得很高剩余空间会以空白行填充。想要自适应高度要么在样式中设置中继器高度为自动要么在交互里动态设置高度后面我会讲到。3. 从零搭建中继器表格照着做的完整实操流程理解了原理接下来就是动手环节。我下面这套流程是我自己摸索后验证最顺的顺序按这个走新手基本不会迷路。3.1 创建中继器并做好基础命名规范在Axure RP 9的库面板里找到Default库拖一个中继器元件到画布上。它的默认外观是右上角一个黄色小方块、左下角三条横线的灰色矩形没有样式可言。别急着看效果先做两件小事第一给中继器起一个有意义的名字比如repUserTable或者repOrderList千万别留默认的中继器1。因为后面写交互、做联动的时候你要在中继器的交互面板里频繁引用它名字太随意会看得人脑壳疼。第二打开右侧边界区的数据集把默认的Column0、Column1、Column2改名成你真正需要的数据字段比如姓名、部门、入职时间、状态。这里改的字段名就是你后面做绑定的引用依据改的时候顺手统一大小写规范。我个人的习惯是全小写加下划线例如user_name、dept_name这样在交互里写表达式时不用操心大小写。3.2 设计行模板表头和行模板别混在一起双击中继器进入模板编辑页。在这一步你需要先想清楚你做的表格要不要单独的表头我踩过一个坑一开始我把表头也放在中继器模板里面结果表头跟着数据一起复制一列数据出来四五个表头场面非常壮观。正确做法是表头独立放在中继器外面就放在中继器上方画一条横向矩形作为表头容器里面放标题文本中继器元件本身只负责渲染数据行。模板页里画一个矩形作为整行的底框宽度建议和外面的表头宽度保持一致比如900像素。然后在矩形上面放几个文本标签数量和你数据集里的字段数一致。先别管内容随便画个大概布局就行。工具用熟练之后这一步的布局是否精准其实对最终效果影响不大因为你在模板里确定的是每一行的内部结构而不是最终画布上的绝对坐标。3.3 批量绑定字段一个fx按钮解决所有问题这是整个过程中最核心、也最容易出问题的一步。选中模板页里的第一个文本标签打开右侧检视区文本那一栏点击编辑文本那个fx按钮在弹出的文本编辑窗口中把默认的占位内容删掉输入[[Item.user_name]]这里的user_name必须和你在数据集里定义的字段名完全一致区分大小写。Axure的中继器表达式语法是用双层方括号包裹变量取值的Item代表当前数据行的对象引用后面用点号连接字段名。确认之后模板页里的文本标签会立即显示[[Item.user_name]]这段文本放心这不是显示错乱这是正常的——在模板页面里Axure不会实时渲染数据内容只有回到主画布预览时才会变成真实数据。第二个、第三个字段按同样的方式绑定分别换成[[Item.dept_name]]、[[Item.join_date]]。绑定完以后建议随手测一下回到主画布点击预览按钮如果你数据集里有数据表格应该已经能显示出来了。如果这里全空白优先检查三步数据集里到底有没有数据、字段名是否拼写一致、表达式是否用了中英文混合的方括号。3.4 调间距与行高让表格看起来像表格数据能显示只是第一步多数新手死在这一步之后——数据是出来了可行与行之间挤成一团或者行高忽大忽小怎么调都不像一张正常的表格。中继器的行间距和行高是由两个地方共同决定的第一是模板页面里行底框矩形的高度第二是中继器元件本身在画布上的样式设置。在画布上选中中继器右侧检视区有布局和样式设置布局里的间距可以设置列表项之间的水平/垂直间距样式里的高度决定了容器的整体高度。我的经验是模板里行底框的高度建议设置为40~50像素行间距留2~3像素这样出来的表格既有呼吸感又不会显得松散。垂直间距设置为0两行之间贴紧然后用行内边距或者行底框自身的内边距来决定单元格内容的位置效果会更干净。间距设置弄完以后预览一眼如果行底框矩形的高度和文本标签的纵向位置不匹配文本会贴到矩形边缘这时回到模板页微调文本标签到垂直居中的位置即可。3.5 隔行变色与悬停高亮让表格有反馈基础表格搭完通常还要做两个视觉效果隔行变色和鼠标悬停高亮。这两个效果如果放在普通的Axure表格里几乎要手动画好几遍但在中继器里只需要两步。选中中继器元件在右侧检视区的样式标签下找到重复项里的交替背景色选项点击添加设置偶数行背景色为浅灰色比如#F7F8FA奇数行保留白色。这一步是Axure 9自带的原生能力不需要写任何交互选好颜色就生效。悬停高亮则需要给模板页面里的行底框矩形添加交互在模板页选中行底框矩形点击右侧交互面板下的新建交互选择鼠标移入时动作选择设置样式目标选当前元件把样式中的背景色改成浅蓝色比如#E8F0FE。然后再添加一个鼠标移出时的交互把背景色恢复为默认的白色。注意这里的逻辑是偶数行原本是浅灰背景鼠标移出时如果也恢复成白色偶数行的隔行变色就丢失了。所以不要简单粗暴地设置成白色要保证和行本身的交替背景色逻辑一致。更稳妥的方案是选中模板页里的行底框矩形在交互里用条件判断行序号[[Item.index % 2 0]]来分别恢复颜色——但这对新手来说太绕我建议前期可以先不做偶数行恢复原色这个细节用一个不太透明的浅色覆盖视觉上也不会有明显穿帮。4. 让表格真正动起来筛选、排序与增删改的完整实现表格做到上面这步其实已经可以交给开发看个大概了。但中继器的核心能力还远没发挥出来。接下来这部分才是它碾压手画表格的地方——数据的动态操作。我会从最常用的四类操作讲起每类都会给出可以直接照抄的实现步骤。4.1 数据集交互增删改的基础语法Axure 9中所有中继器的数据操作都发生在交互面板里。给中继器添加交互时的动作列表中有数据集这个大分类下面有添加行更新行删除行等多个选项。对列表项而言你可以在某个按钮的鼠标单击时交互里选中这些数据集操作然后指定给目标中继器。添加行点击该动作后在弹出的窗口里能设置新行各字段的值。静态的可以直接写死动态的可以在值里用添加局部变量或者直接引用当前元件、其他元件的文本值。举个例子如果表格下方有两个输入框和一个添加按钮按钮的单击交互里选择添加行目标中继器选表格然后把姓名字段的值设置为输入框inputName的文本值就可以实现用户填写、点击添加、表格自动多一行的效果。更新行更新行与添加行不同它需要指定更新哪一行。操作窗口里会有一个已选行的选项默认是指定行设为当前元件所在的列表项或者用条件筛选出一个行集合。字段值同样可以直接引用输入框的文本。删除行删除行的操作窗口里关键同样是指定删除哪些行。默认选当前行就行。我实际做原型的时候最多的是删除当前项这种场景每一行右侧放一个删除按钮按钮单击事件里选中删除动作、目标中继器、已选行选当前元件因为按钮位于模板内部点击按钮时当前元件指向的就是当前按钮所在的那一行上下文中继器会自动拿到正确的行索引进行删除。4.2 按条件筛选只显示我想看的数据筛选是中继器最实用、也最让新手困惑的功能因为它的实现逻辑不是删除而是隐藏不符合条件的数据。给中继器添加筛选动作的路径是交互面板新增交互 → 选择筛选分类 → 筛选行 → 目标中继器。弹出的设置窗口里你需要点击Add Filter添加条件按钮然后从左侧下拉框选择你要判断的字段中间选择比较符号等于、不等于、包含、大于等右侧填参照值。参照值可以是写死的也可以点击fx按钮引用某个元件的文本值。这里最容易出问题的点在于多个条件之间默认是AND还是OR逻辑。Axure 9的筛选设置窗口允许多行条件每行条件前面有一个下拉框可以选and或or来组合条件。新手很容易忽略这个下拉框结果想实现状态等于已完成或进行中这种多选出来的却是空的或全显。另外一个细节是重置筛选如果不做任何后续处理筛选执行后数据集会一直保持筛选状态。如果你做了多个筛选条件想恢复显示全部数据就再添加一个移除筛选的交互目标中继器设为同一个表格即可。我通常在全部按钮的单击事件里放一个移除筛选在各类筛选条件按钮里放不同的筛选这样整个表格的筛选逻辑就非常清楚了。4.3 表头点击排序一行表达式解决升降序表格排序在Excel里是点一下的事在Axure中继器里就要靠排序动作了。选中表头里的某个字段文本给它新建交互鼠标单击时添加排序分类下的排序行目标中继器选中表格元件。在弹出的窗口里点击添加排序下拉框选一个字段然后在旁边的下拉框里选择升序或降序。关键点在于Axure同一个排序动作里可以添加多个排序条件它优先按第一个条件排如果相等再按第二个条件排。对应到表格场景往往是先按部门排再按入职时间排这个层级关系直接在排序窗口里就能搭出来。想要实现点击某个表头按该列升序再点一下变降序的常见交互需要用到一点小技巧中继器有个分类的概念它允许你定义排序是否启用。更简洁的做法是设一个全局变量控制当前排序方向每次点击时切换这个变量的值然后重新执行排序行动作。初学者可以先用简单方案做两个排序动作一个升序一个降序用如果条件判断当前状态再决定执行哪个。虽然代码感弱一点但逻辑直观得多不容易出错。4.4 行内编辑双击单元格直接改数据这是中继器表格所有酷炫功能里让我觉得最值钱的一个。实现思路是在模板页的对应单元格文本标签上添加鼠标双击时交互动作是显示一个文本框预先放在模板页里、默认隐藏然后把文本框的文本设置为当前单元格的值。步骤拆开是这样的在模板页里在需要可编辑的文本标签旁边放一个文本框元件设置它的初始文本为空并在交互里让它默认隐藏或者用样式里的隐藏勾选。选中该文本框添加鼠标移出时或者按下回车时交互动作是更新行目标中继器选择当前所在的中继器已选行选当前行字段名选对应字段值引用该文本框自身的文本。最后再加一个隐藏动作把文本框隐藏起来恢复显示原本的文本标签——文本标签虽然没被更新但数据已经被更新了中继器其余绑定该字段的列表项内容也会同步更新所以视觉上会自然刷新。你可以做一个真实的场景验证把表格某一列改成备注字段双击备注单元格弹出输入框输入完鼠标点别处单元格秒变新内容。这个交互在模拟后台管理系统的数据维护场景时特别有说服力拿去跟开发对需求对方一眼就能get到你要的交互逻辑。5. 中继器表格的进阶实战分页、统计与跨模块联动基础功能做到位表格在原型层面已经能打七八十分了。但如果你要做的是一套完整的管理后台原型大概率会遇到三个进阶需求数据量大了要分页、表格底部要有合计、点击某一行要联动右侧详情面板。这三块我挨个讲。5.1 分页控制中继器表格不被数据撑爆的解法中继器默认的行为是数据有多少行就展示多少行全部铺开。数据量一旦上到几十条页面会变得非常长。更麻烦的是原型评审时代码能力不够的人会很难从原型上想象出分页之后是什么样的。中继器本身没有内置分页功能需要借助数据集筛选和序号计算来模拟。最常用的方案是用两个全局变量或局部变量记录当前页码和每页条数然后通过筛选动作用中继器内置的[[Item.index]]列表项序号来过滤数据。举个例子假设每页显示5条当前页码存在变量currentPage里。筛选条件可以写成((Item.index (currentPage - 1) * 5 1) (Item.index currentPage * 5))。这个表达式的含义是保留当前页范围内的记录。然后在上一页下一页按钮的单击事件里分别把currentPage减1或加1再执行一次同样的筛选动作就行。这里有个坑中继器的Item.index是从0开始还是从1开始在新版本里Item.index确实是从0开始计数的很多人写分页时用 (currentPage - 1) * 5结果第一页正常、第二页少一条就是差了这1的偏差。我的建议是统一用序号 (currentPage - 1) * 5 序号 currentPage * 5这个区间配合0起始的index就刚好。5.2 汇总统计底部合计行怎么算表格底部加一行合计是后台列表最常见的需求。中继器实现它的思路有两类一类是直接在数据集中加一条合计记录一类是用中继器的汇总动作。Axure 9在中继器交互里提供了一个数据集下的更新系列能力其中有一个被不少人忽略的功能——中继器添加行时如果字段值选择求和等聚合函数可以实现类似Excel SUM的汇总。操作方法是给表格底部一个按钮或页码切换时触发的动作里选择添加行目标中继器选表格在字段值设置里找到求和函数然后选择要对哪个字段求和。这个功能很适合每次数据变化后自动重新计算合计的场景。但因为中继器底部加行会影响分页逻辑我个人的习惯是更推荐把合计行单独放在中继器外面。用一个文本框或者一个矩形容器放在表格最下方它的值不等于手算而是通过中继器的相关属性引用得到在文本框的值设置中用表达式[[sum:repTable.Item.amount]]这种方式求和。注意这里的语法sum:前缀是Axure中继器的聚合函数标识repTable是中继器的名称Item.amount是要求和字段的引用。由于中继器数据变化会自动刷新所以汇总值也会跟着数据联动更新——这就达到了增删改之后合计自动变的预期效果而不用每次手动动数据。5.3 跨模块联动点击表格行右侧详情面板跟着变这个场景在原型需求里出现的频率极高左侧一个表格右侧一个详情面板点击表格的某一行右侧展示这一行的完整详情。实现方式并不复杂先保证右侧详情面板里的文本标签都已改为中继器字段的引用但它们不在中继器内部所以不能直接用Item.xxx。Axure提供了一个桥梁可以通过设置文本动作让详情面板的文本等于中继器中当前选中行的字段值。操作步骤给中继器添加选中当前行交互鼠标单击时动作用选中里面的选中选项选当前元件这样就完成了行选中状态的标记。然后再添加一个设置文本动作目标选右侧的详情面板文本标签值设置为[[Item.xxx]]——注意这里的关键逻辑因为单击的是中继器内部的行Item在当前交互上下文里指的就是刚才被点击的那个列表项。所以即使在详情面板这个中继器外部的元件上只要在同一个交互流程里引用它Axure也能正确解析出当前行的数据。这也是很多初学Axure的人最困惑的地方明明不在中继器里面为什么能用Item答案就是交互上下文只要这个动作是在中继器的行的触发链里发起的引用的Item就永远是触发者。6. 表格样式细节让它从能用的原型变成像样的设计稿我知道很多设计师做原型对视觉要求高中继器表格如果只是堆文本展示效果确实有点干。这里补两个我自己常用的样式细节成本低、效果好。6.1 表头固定滚动数据表头不动当数据量大的时候中继器表格会撑长页面一滚表头就看不见了。Axure 9实现表头固定的办法其实很朴素把所有内容包在一个动态面板里动态面板设置水平滚动和垂直滚动只勾选所需的表头放在动态面板外面或者放在动态面板内部、上方不被滚动覆盖的区域中继器放在动态面板内部的滚动区域。这样滚动的只有数据区表头始终停留在视口顶部。需要注意动态面板的宽度必须和中继器的行宽一致滚动条才会规整否则会出现内容横向错位。6.2 状态标签与条件格式化表格里经常会看到已启用已禁用待审核这类状态标签。中继器做这个的方案很成熟在模板页里用一个文本标签作为状态字段然后给它添加文本变化时或中继器的每项加载时交互通过条件分支判断字段值动态设置该标签的背景颜色、文本颜色甚至填充文本。官方的最佳实践是每项加载时Item Loaded这个事件。在模板页的任意元件上添加交互选择事件每项加载时——注意这个事件只在中继器场景下出现触发时机是每一条数渲染前。在这个事件里添加条件判断if [[Item.status]] 启用动作是该文本标签设置背景色为绿色、文字为白色else if禁用态设为灰色。这样当数据集中某行status值为启用时这一行的状态标签自动变绿。数据是写死的也好、联动的也好渲染时自动套用样式完全不用人手调。说白了这相当于在中继器里实现了一个简易的条件格式化引擎。6.3 空数据态别让表格变成一块白板数据被删光了怎么办原型阶段很容易忽略这个边界。如果中继器没有数据画布上就是一块空白评审的时候你很难解释这个空区域是什么。我一般会在中继器外面叠加一个文案矩形写暂无数据请添加记录默认隐藏。然后在数据集的更新后事件数据增删改后都会触发里加一个判断如果中继器当前数据量为0显示空数据提示否则隐藏。判断数据量可以使用中继器的[[repTable.itemCount]]属性。这个细节成本极低但看起来非常专业。7. 踩过的坑与排查清单中继器表格常见问题最后一部分我把自己这些年用中继器做表格时踩过的坑按照出现频率排个序给新手当排查手册用。表格逻辑能写通前面六部分的功力基本就到位了。7.1 数据不显示的排查顺序数据不显示90%是下面三个原因字段名大小写不匹配、表达式没用双层方括号、数据集里根本没数据。我排查的时候直接在预览模式下看浏览器控制台有没有报错没有的话回Axure检查数据集的字段名是否和Item.xxx完全一致。还有一个隐蔽的原因是模板页里的文本标签被某个元件覆盖了文字渲染出来但看不见尤其是背景矩形盖在上面这种层级问题。选中模板页元件后用顶部快捷键盘CtrlK置于顶层解决。7.2 行高忽大忽小、布局错乱的根源如果你发现中继器表格各行的高度不一致多半是模板页里没有统一的高度基线。中继器的模式优先级一个行模板内部最高的那个元件的下边缘会决定整行的高度所以如果你某一行模板里某个文本标签特别长换行后会把这行撑高其他行跟着变得参差不齐。解决方式是统一约束文本标签设置成单行不换行样式里把自动换行取消或者给行底框矩形设置固定高度把所有元件放在它里面。还有一个更彻底的做法在模板页里把不需要自动撑高的矩形、文本都设置为适应内容关闭保持固定像素。7.3 更新行和删除行不生效的诡异情况我遇到过几次更新行逻辑写得很完整但就是不生效的情况排查到最后发现是目标中继器选错了。在交互面板里更新行动作的目标元件默认是当前元件可如果中继器元件被包在动态面板里或者你给中继器改了名下拉列表里就会出现多个同名或类似名的中继器选错一个就全盘失效。建议把所有中继器和它的行模板内部元件全部命名成清晰唯一的名字从源头上避免这种情况。另外删除行时如果已选行选择的是当前列表项但按钮并不在中继器模板页里而是在画布上外部做出的删除操作那当前列表项会指向undefined删除自然失败。外部按钮要删除某一特定行需要你先通过选中行把目标行标记出来再用已选行的选中的行作为删除范围。这个细节非常绕我建议外部触发删除功能的场景一律用当前选中的行作为删除边界并配合表格行的选中状态一起使用。7.4 性能问题数据量大了卡顿怎么办几百条数据时中继器性能会明显下降尤其是每条记录里塞了很多字段、模板页元件树又很庞大时。我用下来的经验是中继器的数据量控制在200条以内做展示和交互最流畅。如果需要模拟大数据量可以在数据集里填500条预览时接受一定的卡顿但不要把中继器用于高频率实时刷新的场景比如输入一个字母就触发筛选再排序这种联动在数据量大时延迟会非常明显。优化角度上值得做的有模板页里尽量少用复杂阴影、透明度和圆角这些视觉效果筛选、排序动作尽量合并到同一个事件链里执行避免多次触发刷新每条记录的字段能少绑就少绑绑定越多渲染成本越高。8. 最后分享两个我常用的技巧讲完坑再分享两个我在工作里觉得非常实用的小技巧算是一点的bonus。第一个是表格行序号的生成。很多表格第一列要显示序号1、2、3这样手写太蠢数据一动序号就错位。正确做法是在模板页的内容文本标签里写[[Item.index 1]]Item.index是中继器自动给每条数据生成的从0开始的序号加1就是常规展示序号。这个表达式会和筛选联动筛选后看到的序号就是过滤后的序号不用自己维护。第二个是直接改中继器内部数据集的快捷方式。预览模式下你没法直接双击单元格改数据但可以借助前面的行内编辑方案或者在中继器上放一个隐形按钮点击时触发表格更新后重新绑定本质上是把更新操作交给交互逻辑。这套做多之后你会发现中继器表格与其说是在画表格不如说是在搭一个微型数据管理系统。随着你把这些技巧反复用几遍中继器那个看似吓人的黄色小图标慢慢就会变成你Axure工具箱里最趁手的一件家伙。我建议你现在就打开一个新文件从拖一个中继器开始照着第三部分的步骤把一张三列表格做出来然后试着给它加上筛选、排序、行内编辑和分页。等这四个功能都跑通了管理后台里最常用表格列表场景对你来说基本就是半小时内出稿的事。