編輯導(dǎo)讀：合并單元格是制作表格經(jīng)常會用到的操作，但是axure里面自帶的表格原件并沒有合并單元格這個操作。本文作者通過中繼器制作能合并單元格的表格，與你分享。

在制作表格的時候，我們往往需要合并單元格，但是axure里面自帶的表格原件并沒有合并單元格這個操作，導(dǎo)致我們不能完成這一操作。以前我們的解決辦法：第一種是在excel里面做好，然后復(fù)制圖片到axure，但是圖片是不能修改里面的文字內(nèi)容，也不可以想表格一樣對每格制作交互；另一種是用矩形遮擋多個單元格，然后模擬合并的效果，這樣雖然可以，但是如果合并內(nèi)容多的時候，就會很麻煩的。

所以今天作者教大家用中繼器制作一個能夠合并單元格的表格，通過填寫中繼器表格內(nèi)容，或者復(fù)制excel表格內(nèi)容到中繼器表格，通過交互自動將空格合并，完成后如下如所示效果：

原型地址：https://pjvqc6.axshare.com/#g=1

一、材料準(zhǔn)備

中繼器——將下方材料如圖所示擺放中繼器內(nèi)部，中繼器背景交替顏色為白色和淺藍(lán)色

矩形——n個透明矩形，有多少列就擺放多少個，案例中為6個，從做到右依次為編號123456……，所有矩形選中樣式設(shè)置為深藍(lán)色，后續(xù)會做一個第一列表格變成深藍(lán)色的樣式、字體加粗，字體顏色為白色

具體的樣式可以根據(jù)實(shí)際的ui需求設(shè)置，如下圖所示擺放：

二、中繼器表格設(shè)置

如下圖所示，有多少個格子就新建多少列，Column1對應(yīng)第一個格子，Column2對應(yīng)第二個格子的文字如此類推。

內(nèi)容填寫方式：如果格子內(nèi)沒有內(nèi)容，相當(dāng)于該格需要和前面的格子合并，我們在填寫的時候，可以直接將excel里面合并了單元格的內(nèi)容復(fù)制到該表格中。注：第一列不能為空。

三、交互設(shè)置

1. 設(shè)置文本

在中繼器每項(xiàng)加載時：首先把中繼器表格內(nèi)每一個值設(shè)置到對應(yīng)的矩形內(nèi)，矩形1=Item.Column1；矩形2=Item.Column2；矩形3=Item.Column3；矩形4=Item.Column4；矩形5=Item.Column5；矩形6=Item.Column6……；

2. 隱藏矩形

如果中繼器表格里面的內(nèi)容為空，我們需要將對應(yīng)矩形隱藏，如果Item.Column6為空，我們將矩形6隱藏起來；如果Item.Column5為空，隱藏矩形5；如果Item.Column4為空，隱藏矩形4；如果Item.Column3為空，隱藏矩形3；如果Item.Column2為空，隱藏矩形2。

注：矩形1不能隱藏，因?yàn)榈谝涣斜仨氂兄?，該原型是將后面為空的格子合并到前?/p>

3. 設(shè)置尺寸

這里面是最關(guān)鍵的一步，我們就是通過設(shè)置矩形的尺寸來實(shí)現(xiàn)合并的效果的，例如，第6列表格的值為空，我們上一步隱藏了矩形6，接著我們需要設(shè)置矩形5的尺寸，矩形5的尺寸就等于他本身的尺寸+矩形6的尺寸，然后再一步步判斷第5列表格的值是否為空值，如果是空值，就設(shè)置矩形4的尺寸等于他本身的尺寸+矩形5的尺寸。注意：這里應(yīng)為是橫向合并，前面提到的尺寸均為寬，矩形的高保持原來不變

這里可能比較難理解，我舉個實(shí)例，假設(shè)所有格子的寬都是100，我們首先判斷最后一個格子（第6格）的值是否為空，如果不為空，就不做處理；如果為空就隱藏格子6，同時將格子5設(shè)置成寬200，這樣就擋住了格子6原來的位置，做出了合并的效果。接下來在判斷格子5的值，如果不為空，就不做處理；如果為空，就設(shè)置格子4的寬=他原來的寬100+格子5的寬，格子5的寬是前邊定義好的，如果格子6的值為空，就是200，不為空就100。如此往前推，直到格子和的值。

4. 設(shè)置選中

最后我們還想突出表頭，因?yàn)榍懊嫖覀冊O(shè)置了表格里面矩形的選中樣式為深藍(lán)色的樣式、字體加粗，字體顏色為白色，所以我們增加一個判斷事件，判斷該行是不是第一行，如果是第一行就選中讓這個變色。

當(dāng)item.index==1時，我們將中繼器內(nèi)所有格子的選中狀態(tài)設(shè)為真即可。

四、后續(xù)拓展

恭喜你已經(jīng)學(xué)會用中繼器制作橫向的能合并的表格，有的同學(xué)可能會問怎么制作縱向的合并，其實(shí)原理是一樣的，只不過需要把表格轉(zhuǎn)置一下，excel里面有這樣一個功能，可以轉(zhuǎn)置了直接復(fù)制到中繼器里，制作縱向合并表格，我們需要將中繼器布局調(diào)為縱向，然后中繼器里表格排列也是縱向，設(shè)置尺寸從原來的設(shè)置寬，轉(zhuǎn)變?yōu)樵O(shè)置高，其中的思路都是一致的，你們可以自己試著做一下。

那以上就是本期的全部內(nèi)容了，感謝您的閱讀，我們下期見，88~~~

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

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