element-ui form或table lable換行問(wèn)題

今天在寫(xiě)項(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="車(chē)牌號(hào)" prop="busno"/> 
    <el-table-column label="車(chē)站" 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ì)被瀏覽器保留。其行為方式類(lèi)似 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è)參考，也希望大家多多支持腳本之家。

最新評(píng)論