中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

一、材料準備

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

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

具體的樣式可以根據實際的ui需求設置，如下圖所示擺放：

二、中繼器表格設置

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

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

三、交互設置

1. 設置文本

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

2. 隱藏矩形

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

注：矩形1不能隱藏，因為第一列必須有值，該原型是將后面為空的格子合并到前面

3. 設置尺寸

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

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

4. 設置選中

最后我們還想突出表頭，因為前面我們設置了表格里面矩形的選中樣式為深藍色的樣式、字體加粗，字體顏色為白色，所以我們增加一個判斷事件，判斷該行是不是第一行，如果是第一行就選中讓這個變色。

當item.index==1時，我們將中繼器內所有格子的選中狀態設為真即可。

四、后續拓展

恭喜你已經學會用中繼器制作橫向的能合并的表格，有的同學可能會問怎么制作縱向的合并，其實原理是一樣的，只不過需要把表格轉置一下，excel里面有這樣一個功能，可以轉置了直接復制到中繼器里，制作縱向合并表格，我們需要將中繼器布局調為縱向，然后中繼器里表格排列也是縱向，設置尺寸從原來的設置寬，轉變為設置高，其中的思路都是一致的，你們可以自己試著做一下。

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

本文由 @做產品但不是經理 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。