前言
在使用element的table中咱們有可能會(huì)遇到后端返回的單個(gè)字段有多個(gè)內(nèi)容這個(gè)時(shí)候想一個(gè)單元格展示換行其實(shí)很簡(jiǎn)單直接就是template加個(gè)塊標(biāo)簽v-for就可以了如果是很多的話這樣表格就不美觀如下圖，這個(gè)時(shí)候大家會(huì)想到是show-overflow-tooltip，但是如果說(shuō)數(shù)據(jù)跟我的一樣是時(shí)間，他只能說(shuō)是幫你隱藏不能幫你做到換行展示這個(gè)時(shí)候還得使用tooltip。
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-557199.html
二、話不多少了直接上代碼和成果圖了
1.HTML部分
代碼如下：tooltip其實(shí)也是不支持換行的但是官方給了我們slot將內(nèi)容作為插槽傳入dom就可以達(dá)到我們想到的效果了。
?下圖的popper-class是tooltip的樣式是不在當(dāng)前組件的是一個(gè)和APPvue同級(jí)別的文件因此官方給了我們這個(gè)特殊的class讓我們來(lái)修改他的樣式，至于我為什么有兩個(gè)，這點(diǎn)的確也是我的困擾之處，我使用overflow-y：auto無(wú)論多少個(gè)內(nèi)容都會(huì)出現(xiàn)滾動(dòng)條，無(wú)奈只能給他設(shè)置兩種樣式了，如有大佬知道是什么原因也還請(qǐng)為解答一下。
? <template slot-scope="scope">
? ? ? ? ? ? <el-tooltip placement="top" popper-class="popoverStyle"
? ? ? ? ? ? ? v-if="scope.row.createTime.length > 20">
? ? ? ? ? ? ? <div v-html="tooPlct(scope.row.createTime)" slot="content">
? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? <div class="oneLine">
? ? ? ? ? ? ? ? {{ scope.row.createTime[0] }}
? ? ? ? ? ? ? </div>
? ? ? ? ? ? </el-tooltip>
? ? ? ? ? ? <el-tooltip placement="top" popper-class="popoverStyle2" v-else>
? ? ? ? ? ? ? <div v-html="tooPlct(scope.row.createTime)" slot="content">
? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? <div class="oneLine">
? ? ? ? ? ? ? ? {{ scope.row.createTime[0] }}
? ? ? ? ? ? ? </div>
? ? ? ? ? ? </el-tooltip>
? ? ? ? ? </template>
2.js部分
?tooPlct(val) {
? ? ? return val.toString().replace(/,/g, '</br>')
? ? },
將后端返回字段中返回的逗號(hào)使用正則匹配替換成換行標(biāo)簽(具體可與后端協(xié)商)，
效果圖
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-557199.html
?
到了這里，關(guān)于element表格tooltip內(nèi)容換行展示（本人第一次寫(xiě)帖子效果圖在最后如果是各位想要的效果請(qǐng)點(diǎn)個(gè)贊，寫(xiě)的不好的地方也可以指導(dǎo)一下萬(wàn)分感謝）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[element-ui] el-table表格頭添加圖標(biāo)-鼠標(biāo)移入顯示el-tooltip提示信息](https://imgs.yssmx.com/Uploads/2024/02/512233-1.png)
