關(guān)于vue中element-ui?form或table?lable換行的問(wèn)題
element-ui form或table lable換行問(wèn)題
今天在寫項(xiàng)目，突然遇到個(gè)需求，需要將form里面的lable換行，百度了下，發(fā)現(xiàn)了一個(gè)辦法，特此記錄下來(lái)
First，我們先要在我們的lable里面進(jìn)行以下操作
:label="'機(jī)組： \n（xxx用）'"
雙引號(hào)嵌套單引號(hào) 在需要換行的文字中間 加入\n 換行符
Second，再添加css的樣式
/deep/ .el-form-item__label{
white-space:pre-line;
}
//如果是table的話就
/deep/ .el-table .cell{
white-space:pre-line;
}
記得加上deep進(jìn)行穿透
white-space規(guī)定段落中的文本不進(jìn)行換行pre-line文本中連續(xù)的空格會(huì)被合并，在遇到換行符/n 或者<br/>元素的時(shí)候會(huì)換行
element table組件內(nèi)容\n換行解決
項(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>由于<el-table>中的數(shù)據(jù)源是直接給了一個(gè)對(duì)象，所以table中的每一個(gè)cell用戶都不用管，要使身份證號(hào) 這一列內(nèi)容以\n換行。首先后臺(tái)傳數(shù)據(jù)要在內(nèi)容需要換行處拼接"\n"字符串。
1.直接將warnings數(shù)據(jù)源中的每一個(gè)元素的對(duì)象中的字段用split分割，再用join拼接\n換行符之后，希望它能夠起作用。但是實(shí)際F12 DOM樹(shù)中的文字看到是進(jìn)行了換行，但是el-table的cell紋絲不動(dòng)。
2.使用<pre>標(biāo)簽的內(nèi)容自動(dòng)換行。<pre> 元素可定義預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符。而文本也會(huì)呈現(xiàn)為等寬字體。
3.先嘗試使用：word-wrap: break-word;將內(nèi)容自動(dòng)換行，IE，OP，Chrome，Safari都可以，F(xiàn)F就悲劇了。
4.查看了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;
}添加樣式完之后身份證號(hào)，這一列內(nèi)容終于出現(xiàn)換行
如若添加完樣式之后沒(méi)有反應(yīng)，可能是添加的位置不對(duì)，自己再好好核對(duì)一下
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue + canvas實(shí)現(xiàn)涂鴉面板的示例代碼
這篇文章主要給大家介紹了vue + canvas實(shí)現(xiàn)涂鴉面板的示例,文章通過(guò)代碼示例介紹的非常詳細(xì),感興趣的小伙伴跟著小編一起來(lái)看看吧2023-08-08
Vue.nextTick是Vue官方給我們提供的一個(gè)API（方法），作用是在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的DOM2021-04-04
最近項(xiàng)目中有用到j(luò)son編輯器,我選用了這款vue的編輯器,看起來(lái)也是比較簡(jiǎn)潔,接下來(lái)就具體介紹一下它,下面這篇文章主要給大家介紹了關(guān)于VUE3使用JSON編輯器的詳細(xì)圖文教程,需要的朋友可以參考下2023-04-04
vue切換頁(yè)面(路由)時(shí)如何保持滾動(dòng)條回到頂部
這篇文章主要介紹了vue 切換頁(yè)面(路由)時(shí)如何保持滾動(dòng)條回到頂部問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue在使用ECharts時(shí)的異步更新和數(shù)據(jù)加載詳解
這篇文章主要給大家介紹了關(guān)于vue在使用ECharts時(shí)的異步更新和數(shù)據(jù)加載的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
vue中wangEditor的使用及回顯數(shù)據(jù)獲取焦點(diǎn)的方法
最近在寫vue的項(xiàng)目中，遇到一個(gè)需求，點(diǎn)擊編輯，顯示彈框，在彈框中的富文本編輯器中編輯自定義文本樣式，可以上傳圖片并回顯。接下來(lái)通過(guò)本文給大家介紹vue中wangEditor的使用及回顯數(shù)據(jù)獲取焦點(diǎn)的問(wèn)題，一起看看吧2021-09-09
這篇文章主要介紹了Vue基本使用之對(duì)象提供的屬性功能實(shí)例詳解，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
最近在學(xué)習(xí)Three.js相關(guān)的技術(shù),恰逢Vue 3.0正式版也已推出,下面這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目中使用three.js的操作步驟,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
Vue.js實(shí)戰(zhàn)之利用vue-router實(shí)現(xiàn)跳轉(zhuǎn)頁(yè)面
對(duì)于單頁(yè)應(yīng)用，官方提供了vue-router進(jìn)行路由跳轉(zhuǎn)的處理，這篇文章主要給大家介紹了Vue.js實(shí)戰(zhàn)之利用vue-router實(shí)現(xiàn)跳轉(zhuǎn)頁(yè)面的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-04-04
組件的二次封裝：保留組件已有的功能,需要重寫組件方法,當(dāng)組件已有大量功能時(shí)候,則需要重寫很多重復(fù)代碼,且組件功能進(jìn)行修改的時(shí)候,封裝的組件也需要對(duì)應(yīng)修改,從而造成許多開(kāi)發(fā)和維護(hù)成本,本文給大家分享了Vue3實(shí)現(xiàn)組件二次封裝的小技巧,需要的朋友可以參考下2024-09-09