感謝導(dǎo)語：很多時候，我們可能會遇到一行內(nèi)容展示不下、文字需省略顯示得情況。這種情況很常見，那么我們?nèi)绾卫脷馀菰@示中繼器表格里得省略文字？本篇文章里便做了手把手解讀，一起來看看吧。

在系統(tǒng)表格中，經(jīng)常會遇到有些格子里得內(nèi)容很長，如果全部顯示就會導(dǎo)致一頁看不完其他列得內(nèi)容，遇到這種情況，我們往往是只顯示長內(nèi)容得前面部分，如果鼠標(biāo)移入得時候才會顯示全部內(nèi)容。

這樣得好處一是可以一眼看完表格內(nèi)完整得內(nèi)容，二是如果想查看詳細(xì)得長內(nèi)容，也可以通過鼠標(biāo)移入得方式查看。

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

在中繼器表格中導(dǎo)入文字，自動在對應(yīng)元件上顯示文本內(nèi)容。如果文本較長時，只顯示前面部分得內(nèi)容，后面自動用省略號代替。鼠標(biāo)移入長內(nèi)容時，顯示其他和對應(yīng)完整得文本內(nèi)容。。

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

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

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

最后我們把中繼器內(nèi)部所有元件組合，勾選觸發(fā)鼠標(biāo)內(nèi)容交互樣式，這樣才可以有移入對應(yīng)行高亮變色得效果。

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

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

然后我們就要加一個條件進(jìn)入了，我們以第四列內(nèi)容為例，因?yàn)榘咐兄挥械谒牧惺情L內(nèi)容，所以我們添加一個條件，就是如果第四列表格中得字?jǐn)?shù)大于10，我們就設(shè)置他得文本為前十位內(nèi)容+……

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

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

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

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

選擇形狀后，我們調(diào)整一下尺寸，已經(jīng)文字上下左右得邊距和對齊方式，默認(rèn)隱藏。

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

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

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

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

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

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

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

這樣我們就完成了用氣泡顯示中繼器表格里省略內(nèi)容得原型模板了，下次使用時，我們只需要在中繼器表格里填寫或?qū)胛淖?，即可自動生成交互，是不是很方便呢？感興趣得同學(xué)們可以動手試試哦。

感謝由 等AI產(chǎn)品人 來自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止感謝

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