關(guān)于el-tooltip使用\n換行的情況顯示
el-tooltip使用\n換行的情況顯示
代碼如下：
str = 'aaaqqqqqqqqqqqqqqqqqq\nwwwwwwwwwwwwwwwwwwwwwwwwvvvvvvvv'
<el-tooltip placement="top">
<div v-html="str" slot="content" style="white-space: pre-line"></div>
<el-button type="text" size="mini" icon="el-icon-paperclip">附件</el-button>
</el-tooltip>使用el-tooltip的插槽 slot="content" 然后 通過v-html 渲染字符串 最后添加 white-space: pre-line 即可實現(xiàn) el-tooltip 換行
記錄一下el-table的tooltip換行
一些需求場景下
需要保持el-table中tooltip出現(xiàn)的時機，并且當(dāng)前代碼編寫時完全不能通過js控制tooltip禁用屬性時，可以通過以下方法實現(xiàn)tooltip換行。
1、對應(yīng)單元格的 showOverflowTooltip 屬性設(shè)置為true，tooltip出現(xiàn)時機依然使用組件原本的。
2、對應(yīng)單元格內(nèi)容使用p標(biāo)簽展示，當(dāng)前單元格依然可設(shè)置一行展示，tooltip中可以按照p標(biāo)簽換行。
如果是tooltip樣式復(fù)雜
需要自己寫覆蓋el-table的邏輯，實現(xiàn)超出之后才提示也能通過js實現(xiàn)。
1、監(jiān)聽鼠標(biāo)劃入單元格事件。
2、監(jiān)聽中判斷當(dāng)前單元格寬度與內(nèi)容實際寬度，當(dāng)內(nèi)容實際寬度 > 單元格寬度時，對應(yīng)的tooltip設(shè)置為不禁用即可。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue數(shù)據(jù)傳遞--我有特殊的實現(xiàn)技巧
這篇文章主要介紹了vue數(shù)據(jù)傳遞一些特殊梳理技巧,需要的朋友可以參考下2018-03-03
vue學(xué)習(xí)筆記之vue1.0和vue2.0的區(qū)別介紹
今天我們來說一說vue1.0和vue2.0的主要變化有哪些？對vue相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2017-05-05
這篇文章主要為大家詳細介紹了Vue.js路由實現(xiàn)選項卡簡單實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
使用el-table做成樹形結(jié)構(gòu)并解決數(shù)據(jù)驅(qū)動視圖問題
這篇文章主要介紹了使用el-table做成樹形結(jié)構(gòu)并解決數(shù)據(jù)驅(qū)動視圖問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue中如何實現(xiàn)拖拽調(diào)整順序功能問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家詳細介紹了vue實現(xiàn)數(shù)字動態(tài)翻牌器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue中關(guān)于_ob_:observer的處理方式
這篇文章主要介紹了vue中關(guān)于_ob_:observer的處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue3如何在父組件修改子組件的值實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-08-08
vue+element使用動態(tài)加載路由方式實現(xiàn)三級菜單頁面顯示的操作
這篇文章主要介紹了vue+element使用動態(tài)加載路由方式實現(xiàn)三級菜單頁面顯示的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
掌握Qwik.js,輕松應(yīng)對前端SSR渲染問題！本指南將為你揭示如何使用這款強大的框架,讓你在前端開發(fā)中游刃有余2023-12-12