關(guān)于vue中element-ui?form或table?lable換行的問題
element-ui form或table lable換行問題
今天在寫項(xiàng)目,突然遇到個(gè)需求,需要將form里面的lable換行,百度了下,發(fā)現(xiàn)了一個(gè)辦法,特此記錄下來
First,我們先要在我們的lable里面進(jìn)行以下操作
:label="'機(jī)組: \n(xxx用)'"
雙引號嵌套單引號 在需要換行的文字中間 加入\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="身份證號" prop="idCardNo" width="300"/> <el-table-column label="車牌號" 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è)對象,所以table中的每一個(gè)cell用戶都不用管,要使身份證號 這一列內(nèi)容以\n換行。首先后臺傳數(shù)據(jù)要在內(nèi)容需要換行處拼接"\n"字符串。
1.直接將warnings數(shù)據(jù)源中的每一個(gè)元素的對象中的字段用split分割,再用join拼接\n換行符之后,希望它能夠起作用。但是實(shí)際F12 DOM樹中的文字看到是進(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; }
添加樣式完之后身份證號,這一列內(nèi)容終于出現(xiàn)換行
如若添加完樣式之后沒有反應(yīng),可能是添加的位置不對,自己再好好核對一下
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
一文搞懂Vue3中toRef和toRefs函數(shù)的使用
這篇文章主要為大家介紹了Vue3中toRef和toRefs函數(shù)的使用方法,文中通過示例為大家進(jìn)行了詳細(xì)的講解,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-07-07vue 1.0 結(jié)合animate.css定義動(dòng)畫效果
本文分步驟給大家介紹了Vue 1.0自定義動(dòng)畫效果,vue1.0代碼結(jié)合animate.css定義動(dòng)畫,頁面一定要引入animate.cdd,具體實(shí)例代碼大家參考下本文2018-07-07vue-awesome-swiper 基于vue實(shí)現(xiàn)h5滑動(dòng)翻頁效果【推薦】
說到h5的翻頁,很定第一時(shí)間想到的是swiper。但是我當(dāng)時(shí)想到的卻是,vue里邊怎么用swiper。這篇文章主要介紹了vue-awesome-swiper - 基于vue實(shí)現(xiàn)h5滑動(dòng)翻頁效果 ,需要的朋友可以參考下2018-11-11關(guān)于element-ui的隱藏組件el-scrollbar的使用
這篇文章主要介紹了關(guān)于element-ui的隱藏組件el-scrollbar的使用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05解決cordova+vue 項(xiàng)目打包成APK應(yīng)用遇到的問題
這篇文章主要介紹了解決cordova+vue 項(xiàng)目打包成APK應(yīng)用遇到的問題,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05