日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后,達者為師

網(wǎng)站首頁 編程語言 正文

show-overflow-tooltip實現(xiàn)表格列內(nèi)容過長顯示提示

作者:她說她說 更新時間: 2022-03-01 編程語言

在Vue項目中,使用ElementUI顯示表格數(shù)據(jù)時,如果某一個列數(shù)值長度超過列寬,會默認(rèn)換行,造成顯示不友好。

翻閱Element-UI文檔,可發(fā)現(xiàn)show-overflow-tooltip列屬性可實現(xiàn)列內(nèi)容過長被隱藏時顯示tooltip的功能。

注:show-overflow-tooltip屬性需要謹(jǐn)慎使用,如果一個頁面多列使用,會影響頁面加載速度。因為show-overflow-tooltip 屬性雖然可以解決文本超長時的問題,但當(dāng)前是在所有的單元格中插入 tooltip 組件包裝來簡單實現(xiàn)的。

tooltip 組件使得 DOM 結(jié)構(gòu)成倍增加,而且每個 tooltip 內(nèi)部都有至少兩個監(jiān)聽事件。這對大數(shù)據(jù)量表格來說性能是可以想象的到的。所以在中后臺系統(tǒng)中大量數(shù)據(jù)的表格展示需要優(yōu)化改進。

示例

 <el-table-column
	 :show-overflow-tooltip="true"
	  align="center"
	  prop="status"
	  label="測試測試"
	  width="100"/>

原文鏈接:https://blog.csdn.net/weixin_43203982/article/details/117689836

欄目分類
最近更新