文中使用的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平台建設以及輕應用開發