通常在系統(tǒng)管理后臺中，使用列表（表格）形式展示數(shù)據(jù)是最為常見的方式。而在使用Axure設(shè)計(jì)產(chǎn)品原型時(shí)想實(shí)現(xiàn)這個(gè)數(shù)據(jù)列表卻不太容易，或許常見的做法就是使用矩形拼湊起來，還有就是直接使用表格控件來布局。但是這都不太方便，首先就是布局麻煩，其次就是數(shù)據(jù)修改比較麻煩。本文給大家介紹下如何使用表格+中繼器控件實(shí)現(xiàn)數(shù)據(jù)列表。

其實(shí)在實(shí)際的原型設(shè)計(jì)過程中，都會在表格+中繼器的基礎(chǔ)上增加個(gè)矩形框一起使用。這也是迫于無奈，在Axure上面表格無法實(shí)現(xiàn)單元格的合并。

因此通常表格只能把表格做為數(shù)據(jù)列表中的表頭，然后再利用中繼器的數(shù)據(jù)填充功能來展示數(shù)據(jù)部分。當(dāng)遇到一些需要合并的單元格時(shí)，矩形框便發(fā)揮了它的強(qiáng)大作用。

下面就著重來講下中繼器如何來顯示數(shù)據(jù)：

創(chuàng)建中繼器，雙擊進(jìn)入中繼器刪除里面的初始內(nèi)容。

創(chuàng)建與表格相同列數(shù)的矩形框，高度可自定義，寬度保持與表格對應(yīng)列相同，給每個(gè)元件起個(gè)名字（配備自己喜歡的風(fēng)格，后續(xù)數(shù)據(jù)就會復(fù)制當(dāng)前的樣式）。

在中繼器的屬性(`Properties`)中找到`Repeater`，創(chuàng)建與表格列數(shù)相同的列并起名（建議保持與上一步的名稱相同），最后填充示例數(shù)據(jù)。

注：可以直接在 Excel 中編輯數(shù)據(jù)，然后直接拷貝到中繼器里面。

選擇中繼器，添加個(gè) Case 用于綁定數(shù)據(jù)與矩形框的關(guān)系。

設(shè)置隔行換色效果，在中繼器的 Style 中找到 Item Background 勾選 Alternating ，然后配對奇偶行的前景色。

注：如果在中繼器里面使用矩形框，一定要把其背景色設(shè)置為無，不然隔行換色就不起效果，這個(gè)教訓(xùn)慘痛的。

這些便是關(guān)于在Axure中實(shí)現(xiàn)表格數(shù)據(jù)實(shí)現(xiàn)（點(diǎn)擊查看效果），如遇到一些復(fù)雜的要求，可以以此為參考，自由的發(fā)揮想象。

PS:

示例源文件下載：數(shù)據(jù)表格.rp

本文由 @凡夢星塵 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels ，基于 CC0 協(xié)議