如何在 LayUI 數據表格的列元素上，鼠標懸浮，顯示全部文字內容（修改源碼）

文中使用的LayUI版本：layui-v2.5.5

 

問題描述：

最近參與開發了狐小E智慧辦公（https://www.hixiaoe.com）項目的管理中臺模塊，前端技術使用了LayUI做爲前端開發的主要控件，但在使用過程當中，有些功能控件未盡其能。好比遇到的問題：產品人員針對項目總體風格給出的設計，方案是項目中全部列表的展現不管每列是否完整，當鼠標懸浮到當前列時，必須出現浮動顯示當前列全部內容的效果。可是原生的Layui中並未提供相關的功能實現，深表遺憾。

問題分析：

要實現鼠標懸浮顯示全部內容，通常採用的都是給對應元素上添加 title 屬性，這樣當鼠標懸浮在對應列的時候，就能夠顯示該列全部內容。
能夠利用Layui table模塊的 templet - 自定義列模板 給每一個列都返回新的元素帶上 title 屬性便可。可是因爲項目風格要求凡是列表中的列都必須有這樣的效果，給每一個頁面每一個表格的每列都寫templet模板，給元素添加title屬性這樣實現確定不現實，同樣的效果應該全局統一改，在一處地方能實現這樣最好，因此想的方案就是——改源碼（從渲染表格的單元格處入手）。

解決方案：

首先找到加載表格的源代碼，在下圖位置：

因爲是自執行函數，須要在此處拼接div，並給div加入title屬性，屬性內容爲當前列全部文字內容：
改動後以下圖：

這樣每列數據都會添加title屬性，當鼠標懸浮到對應列單元格上時，就會展現出單元格內全部內容，符合了大部分列表場景。

 

優化：

因爲業務須要個別列表的某列 ，不須要鼠標懸浮顯示所有內容的效果 ，因此針對這個問題 ，將上面的代碼優化，經過自定義屬性控制當前列是否須要加上title屬性。如下是我在源碼中自定義的一個屬性hideTitle（隱藏title） ，這個屬性是布爾值，當爲true時直接返回，反之就顯示title ,改動剛纔修改的源碼內容以下：

這裏當hideTitle屬性未設置值的時候是undifined，也就是false，因此只有給特定列設置了這個值，纔會控制是否顯示 ，只要有須要隱藏title屬性的列，加入此屬性便可，頁面代碼使用方法以下圖：

總結與反思：

開發過程當中通常不建議頻繁更改源碼，由於這樣會讓公用性的範圍變小，因此要根據業務要求，從實際出發，判斷更改以後的依賴代碼是否也須要相應變更，而後再着改動。

此次負責開發的 狐小智E慧辦公 項目的 管理中臺 （https://oa.hixiaoe.com）模塊，因爲業務要求，全部列表必須出現鼠標懸浮顯示內容的效果，爲了節約時間成本，保證功能代碼改動最小，因此經過修改上文提到的table源碼得以解決，這樣，全部列表就不用變更任何代碼，都會有產品要求的效果，開發代碼量最少，後續作了優化 爲了適用極少數列的部分，不須要title這樣的場景，只須要經過對應屬性控制便可，很是靈活。固然一切根據業務需求變化，若業務中須要此效果的代碼佔比很小，建議仍是從代碼自己進行修改無需改動源碼。

以上就是我對LayUI數據表格的列元素上，鼠標懸浮顯示全部文字內容的解決方案。

 

做者介紹：小文文，狐小E智慧辦公 （https://www.hixiaoe.com）開發工程師，專一移動辦公軟件的SaaS平臺建設以及輕應用開發