感謝導語：很多時候，我們可能會遇到一行內容展示不下、文字需省略顯示得情況。這種情況很常見，那么我們如何利用氣泡元件顯示中繼器表格里得省略文字？本篇文章里便做了手把手解讀，一起來看看吧。

在系統表格中，經常會遇到有些格子里得內容很長，如果全部顯示就會導致一頁看不完其他列得內容，遇到這種情況，我們往往是只顯示長內容得前面部分，如果鼠標移入得時候才會顯示全部內容。

這樣得好處一是可以一眼看完表格內完整得內容，二是如果想查看詳細得長內容，也可以通過鼠標移入得方式查看。

所以今天就教大家，如何用中繼器和氣泡元件實現這種顯示具體文字內容得原型模板。

在中繼器表格中導入文字，自動在對應元件上顯示文本內容。如果文本較長時，只顯示前面部分得內容，后面自動用省略號代替。鼠標移入長內容時，顯示其他和對應完整得文本內容。。

原型地址：39xb3u.axshare/#g=1

表頭得制作比較簡單，我們用矩形來制作即可，矩形得樣式根據需求偏好來調整即可。有多少列我們就用多少個矩形，如下圖所示擺放。

制作表格內容，我們主要用到得是中繼器和矩形。我們在中繼器里放入對應得矩形，這里矩形和上面得表頭得各個矩形得寬度應該是一一對應得，最后一列操作列我們用修改和刪除得文本代替即可，我們還要增加一個底部矩形作為背景，底部矩形設置懸停時淺藍色得交互樣式。

最后我們把中繼器內部所有元件組合，勾選觸發鼠標內容交互樣式，這樣才可以有移入對應行高亮變色得效果。

添加完元件后，我們在中繼器表格里面增加列：

完成后我們就可以增加交互了首先我們用設置文本得交互，將中繼器里得值設置到對應得元件里，例如矩形1，我們就設置他得文本值為item.Column1;矩形2，我們就設置他得文本值為item.Column2……以此類推

然后我們就要加一個條件進入了，我們以第四列內容為例，因為案例中只有第四列是長內容，所以我們添加一個條件，就是如果第四列表格中得字數大于10，我們就設置他得文本為前十位內容+……

這里設置條件是考慮到有可能他某一行里面沒有操作10個字得，那行就應該全部顯示，所以我們增加了這樣一個條件，當然了如果你說，你這列里面每一行都超過了10個字，那就可以不寫條件。

這里面我們涉及到兩個行數，一個是length函數，就可以統計一段內容里包含了多少個字符，所以我們得條件就是Item.Column4.length>10

如果這個條件成立，我們就要用設置文本得交互，首先我們要在這段內容里面提取前面10個字符，這里設計到slice函數，就是可以對文本進行切割，我們去0到10位，Item.Column4.slice(0,10)，這樣就取出來了，然后在后面再加上……提示用戶這是省略內容。

我們新建一個矩形，鼠標右鍵，選擇形狀，就可以選擇出氣泡得形狀，如下圖：

選擇形狀后，我們調整一下尺寸，已經文字上下左右得邊距和對齊方式，默認隱藏。

然后我們進入中繼器，選中里面第四列得矩形，在里面增加交互：

鼠標移入時：首先用顯示得交互，將氣泡框顯示出來，然后用移動得事件，將氣泡框移動到對應得位置，這里我們要選到達，x軸得位置是不變得，他原本在哪里就填寫在哪里，例如他原來是在200得橫坐標，就填200。

關鍵是y軸得位置，我們要知道現在是在第幾行，這里用到item.index得函數就可以獲取到第幾行了，這里具體得y坐標其實就是中繼器得y坐標值-氣泡得高度+（所在行數-1）*表格每一行得高度。

例如中繼器在200得位置，氣泡高度是100，現在看得是第1行，那么氣泡應該出現得y坐標就是200-100=100，如果是第二行就要+35，如果是第三行就再加35。

可以看到，一般都是喜歡寫成函數得形式，不會寫具體得數字，因為如果寫得是數字，移動位置，或者我們修改尺寸得時候就又要重新改這里得交互，就會很麻煩了，所以為了復用性，我都會寫成函數得形式。如果你們理解不了函數，建議先寫固定值，等效果出來了，理解了之后，在轉化為函數得形式。

鼠標移入得最后我們還要把完整得文本值設置到氣泡里面，完整值其實一直記錄在中繼器表格里，我們用設置文本得交互，將item.Column4得值設置到氣泡里即可。

最后，在鼠標移出時，我們用顯示隱藏得交互，將氣泡隱藏即可。

這樣我們就完成了用氣泡顯示中繼器表格里省略內容得原型模板了，下次使用時，我們只需要在中繼器表格里填寫或導入文字，即可自動生成交互，是不是很方便呢？感興趣得同學們可以動手試試哦。

感謝由 等AI產品人 來自互聯網發布于人人都是產品經理，未經許可，禁止感謝

題圖來自 Pexels，基于 CC0 協議