關(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 即可實(shí)現(xiàn) el-tooltip 換行
記錄一下el-table的tooltip換行
一些需求場景下
需要保持el-table中tooltip出現(xiàn)的時(shí)機(jī)，并且當(dāng)前代碼編寫時(shí)完全不能通過js控制tooltip禁用屬性時(shí)，可以通過以下方法實(shí)現(xiàn)tooltip換行。
1、對應(yīng)單元格的 showOverflowTooltip 屬性設(shè)置為true，tooltip出現(xiàn)時(shí)機(jī)依然使用組件原本的。
2、對應(yīng)單元格內(nèi)容使用p標(biāo)簽展示，當(dāng)前單元格依然可設(shè)置一行展示，tooltip中可以按照p標(biāo)簽換行。
如果是tooltip樣式復(fù)雜
需要自己寫覆蓋el-table的邏輯，實(shí)現(xiàn)超出之后才提示也能通過js實(shí)現(xiàn)。
1、監(jiān)聽鼠標(biāo)劃入單元格事件。
2、監(jiān)聽中判斷當(dāng)前單元格寬度與內(nèi)容實(shí)際寬度，當(dāng)內(nèi)容實(shí)際寬度 > 單元格寬度時(shí)，對應(yīng)的tooltip設(shè)置為不禁用即可。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用vue3實(shí)現(xiàn)一個(gè)人喵交流小程序
Vue3 在經(jīng)過多個(gè)開發(fā)版本的迭代后,終于迎來了它的正式版本,下面這篇文章主要給大家介紹了關(guān)于如何使用vue3實(shí)現(xiàn)一個(gè)人喵交流小程序的相關(guān)資料,需要的朋友可以參考下2021-11-11
這篇文章主要介紹了vue代理和跨域問題的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vuex操作state對象的實(shí)例代碼,本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-04-04
vue頁面如何及時(shí)更新頁面數(shù)據(jù)問題
這篇文章主要介紹了vue頁面如何及時(shí)更新頁面數(shù)據(jù)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue實(shí)現(xiàn)滑動(dòng)驗(yàn)證條
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滑動(dòng)驗(yàn)證條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue中同步方法的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
解決vue3.0運(yùn)行項(xiàng)目warning Insert `·` prettier/pret
這篇文章主要介紹了解決vue3.0運(yùn)行項(xiàng)目warning Insert `·` prettier/prettier問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue項(xiàng)目中使用AES實(shí)現(xiàn)密碼加密解密（ECB和CBC兩種模式）
這篇文章主要介紹了vue項(xiàng)目中使用AES實(shí)現(xiàn)密碼加密解密的方法，主要是通過ecb和cbc兩種模式，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
本文主要介紹了vue3使用reactive賦值后頁面不改變，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue3解決ElementPlus自動(dòng)導(dǎo)入時(shí)ElMessage無法顯示的問題
這篇文章主要介紹了Vue3解決ElementPlus自動(dòng)導(dǎo)入時(shí)ElMessage無法顯示的問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03