網(wǎng)站首頁 編程語言 正文
在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
相關(guān)推薦
- 2022-10-20 C語言手寫集合List的示例代碼_C 語言
- 2022-10-02 React構(gòu)建組件的幾種方式及區(qū)別_React
- 2023-01-02 Python中的getter和setter的方法使用詳解_python
- 2023-03-20 Redis使用Bitmap的方法實現(xiàn)_Redis
- 2023-04-06 sql?server?2008數(shù)據(jù)庫不能添加附加文件的解決方法_mssql2008
- 2022-07-13 python版jpeg合成pdf兩種方法
- 2022-03-21 導(dǎo)出與導(dǎo)入Docker的容器實現(xiàn)示例_docker
- 2022-07-03 Golang之理解錯誤輸出
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支