element table組件內(nèi)容換行的實(shí)現(xiàn)方案
背景
臨時(shí)接手了一個(gè)element UI的前端項(xiàng)目，吐槽一下后臺(tái)接口，這個(gè)idCardNo字段。
項(xiàng)目直接使用了el-table組件：
<el-table
:data="warnings"
:row-class-name="highlightRow"
v-loading="isLoading">
<el-table-column
label="ID"
prop="id"/>
<el-table-column
label="時(shí)間"
prop="time"/>
<el-table-column
label="身份證號(hào)"
prop="idCardNo"
width="300"/>
<el-table-column
label="車牌號(hào)"
prop="busno"/>
<el-table-column
label="車站"
prop="busstop"/>
<el-table-column
label="相似度"
prop="sim"/>
<el-table-column
label="詳情">
<template slot-scope="scope">
<el-button @click="detail(scope.row)" type="primary" size="mini" plain>查看</el-button>
</template>
</el-table-column>
<el-table-column
label="確認(rèn)時(shí)間"
prop="acktime"
:formatter="timeFormatter"/>
</el-table>由于這個(gè)el-table組件中的數(shù)據(jù)源是直接給了一個(gè)對(duì)象，所以其實(shí)table中的每一個(gè)cell用戶都不需要管。
前端截圖的接口，沒(méi)有經(jīng)過(guò)操作之后直接顯示的效果是：
很難看對(duì)吧。所以想要把cell里的內(nèi)容也進(jìn)行換行，至少得看的清楚吧？
解決方案
直接將warnings數(shù)據(jù)源中的每一個(gè)元素的對(duì)象中的字段用split分割，再用join拼接\n換行符之后，希望它能夠起作用。但是實(shí)際F12 DOM樹(shù)中的文字看到是進(jìn)行了換行，但是el-table的cell紋絲不動(dòng)。
使<pre>的內(nèi)容自動(dòng)換行。<pre> 元素可定義預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符。而文本也會(huì)呈現(xiàn)為等寬字體。
先嘗試使用：word-wrap: break-word;將內(nèi)容自動(dòng)換行，IE，OP，Chrome，Safari都可以，F(xiàn)F就悲劇了。
查看了pre的瀏覽器默認(rèn)樣式中真正起作用的是white-space: pre這一條。
看看white-space的值：
- normal 默認(rèn)?？瞻讜?huì)被瀏覽器忽略。
- pre 空白會(huì)被瀏覽器保留。其行為方式類似 HTML 中的<pre> 標(biāo)簽。
- nowrap 文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到 <br>標(biāo)簽為止。
- pre-wrap 保留空白符序列，但是正常地進(jìn)行換行。
- pre-line 合并空白符序列，但是保留換行符。
- inherit 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值。
按照我的需求，我希望它保留換行符。
于是添加了樣式：
.el-table .cell {
white-space: pre-line;
}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue 函數(shù)調(diào)用加括號(hào)與不加括號(hào)的區(qū)別
這篇文章主要介紹了vue 函數(shù)調(diào)用加括號(hào)與不加括號(hào)的區(qū)別,幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
vuejs+element UI table表格中實(shí)現(xiàn)禁用部分復(fù)選框的方法
今天小編就為大家分享一篇vuejs+element UI table表格中實(shí)現(xiàn)禁用部分復(fù)選框的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
vue中使用 pinia 全局狀態(tài)管理的實(shí)現(xiàn)
本文主要介紹了vue中使用 pinia 全局狀態(tài)管理的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
當(dāng)vue使用庫(kù)中的getvalue方法時(shí)，需要調(diào)用相關(guān)方法，通過(guò)定義ref=“”，使用this.$refs.exampleEditor._setValue('')，具體示例代碼參考下本文，對(duì)vue使用引用庫(kù)中的方法，感興趣的朋友一起看看吧2021-07-07
vue如何隨心所欲調(diào)整el-dialog中body的樣式
這篇文章主要介紹了vue如何隨心所欲調(diào)整el-dialog中body的樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
在Vue 2中實(shí)現(xiàn)截圖功能,可以使用HTML5的Canvas元素和一些JavaScript代碼來(lái)捕獲屏幕或特定元素的截圖,以下是一個(gè)簡(jiǎn)單的步驟和示例代碼來(lái)實(shí)現(xiàn)這個(gè)功能,需要的朋友可以參考下2023-10-10
公司的大數(shù)據(jù)工作組就需要通過(guò)數(shù)據(jù)大屏展示一些處理過(guò)后有價(jià)值的信息，本文主要介紹了Vue大屏數(shù)據(jù)展示示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
vue3+ant?design的form數(shù)組表單校驗(yàn)方法
這篇文章主要介紹了vue3+ant?design的form數(shù)組表單，如何校驗(yàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2023-09-09
這篇文章主要介紹了前端必知必會(huì)之Vue?v-if指令的相關(guān)資料,Vue中的條件渲染指令v-if、v-else-if和v-else用于根據(jù)條件動(dòng)態(tài)創(chuàng)建HTML元素,通過(guò)使用比較運(yùn)算符和邏輯運(yùn)算符,可以編寫(xiě)復(fù)雜的條件邏輯,需要的朋友可以參考下2025-02-02
這篇文章主要介紹了el-menu彈出菜單樣式不生效的問(wèn)題及解決方法,修改彈出框元素不在 el-menu 樣式中,我們需要在 el-menu–popup 中修改樣式,具體操作代碼跟隨小編一起看看吧2024-07-07