欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于vue中element-ui?form或table?lable換行的問題

 更新時間:2022年03月08日 10:44:09   作者:一顆甜橙樹  
這篇文章主要介紹了vue中element-ui?form或table?lable換行的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

element-ui form或table lable換行問題

今天在寫項目,突然遇到個需求,需要將form里面的lable換行,百度了下,發(fā)現(xiàn)了一個辦法,特此記錄下來

First,我們先要在我們的lable里面進行以下操作

:label="'機組: \n(xxx用)'"

雙引號嵌套單引號 在需要換行的文字中間 加入\n 換行符

Second,再添加css的樣式

/deep/ .el-form-item__label{
    white-space:pre-line;
}
//如果是table的話就
/deep/ .el-table .cell{
    white-space:pre-line;
}

記得加上deep進行穿透

  • white-space規(guī)定段落中的文本不進行換行
  • pre-line文本中連續(xù)的空格會被合并,在遇到換行符/n 或者<br/>元素的時候會換行

element table組件內(nèi)容\n換行解決

項目使用<el-table>組件

<el-table :data="warnings" :row-class-name="highlightRow" v-loading="isLoading"> 
    <el-table-column label="ID" prop="id"/> 
    <el-table-column label="時間" 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="確認時間" prop="acktime" :formatter="timeFormatter"/> 
</el-table>

由于<el-table>中的數(shù)據(jù)源是直接給了一個對象,所以table中的每一個cell用戶都不用管,要使身份證號  這一列內(nèi)容以\n換行。首先后臺傳數(shù)據(jù)要在內(nèi)容需要換行處拼接"\n"字符串。

 1.直接將warnings數(shù)據(jù)源中的每一個元素的對象中的字段用split分割,再用join拼接\n換行符之后,希望它能夠起作用。但是實際F12 DOM樹中的文字看到是進行了換行,但是el-table的cell紋絲不動。

2.使用<pre>標簽的內(nèi)容自動換行。<pre> 元素可定義預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現(xiàn)為等寬字體。

3.先嘗試使用:word-wrap: break-word;將內(nèi)容自動換行,IE,OP,Chrome,Safari都可以,F(xiàn)F就悲劇了。

4.查看了pre的瀏覽器默認樣式中真正起作用的是white-space: pre這一條。

看看white-space的值

  • normal默認??瞻讜粸g覽器忽略。
  • pre空白會被瀏覽器保留。其行為方式類似 HTML 中的<pre> 標簽。
  • nowrap文本不會換行,文本會在在同一行上繼續(xù),直到遇到 <br>標簽為止。
  • pre-wrap保留空白符序列,但是正常地進行換行。
  • pre-line合并空白符序列,但是保留換行符。
  • inherit規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值。

按照我的需求,我希望它保留換行符

于是添加了樣式:

.el-table .cell {
  white-space: pre-line;
}

添加樣式完之后身份證號,這一列內(nèi)容終于出現(xiàn)換行

如若添加完樣式之后沒有反應(yīng),可能是添加的位置不對,自己再好好核對一下

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 一文搞懂Vue3中toRef和toRefs函數(shù)的使用

    一文搞懂Vue3中toRef和toRefs函數(shù)的使用

    這篇文章主要為大家介紹了Vue3中toRef和toRefs函數(shù)的使用方法,文中通過示例為大家進行了詳細的講解,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2022-07-07
  • vue2源碼解析之全局API實例詳解

    vue2源碼解析之全局API實例詳解

    全局API并不在構(gòu)造器里,而是先聲明全局變量或者直接在Vue上定義一些新功能,Vue內(nèi)置了一些全局API,下面這篇文章主要給大家介紹了關(guān)于vue2源碼解析之全局API的相關(guān)資料,需要的朋友可以參考下
    2022-11-11
  • 利用vue控制元素的顯示與隱藏

    利用vue控制元素的顯示與隱藏

    大家都知道在vue中我們可以使用v-if或者v-show去做隱藏顯示,下面這篇文章主要給大家介紹了關(guān)于如何利用vue控制元素的顯示與隱藏的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • vue 1.0 結(jié)合animate.css定義動畫效果

    vue 1.0 結(jié)合animate.css定義動畫效果

    本文分步驟給大家介紹了Vue 1.0自定義動畫效果,vue1.0代碼結(jié)合animate.css定義動畫,頁面一定要引入animate.cdd,具體實例代碼大家參考下本文
    2018-07-07
  • vue-awesome-swiper 基于vue實現(xiàn)h5滑動翻頁效果【推薦】

    vue-awesome-swiper 基于vue實現(xiàn)h5滑動翻頁效果【推薦】

    說到h5的翻頁,很定第一時間想到的是swiper。但是我當時想到的卻是,vue里邊怎么用swiper。這篇文章主要介紹了vue-awesome-swiper - 基于vue實現(xiàn)h5滑動翻頁效果 ,需要的朋友可以參考下
    2018-11-11
  • 關(guān)于element-ui的隱藏組件el-scrollbar的使用

    關(guān)于element-ui的隱藏組件el-scrollbar的使用

    這篇文章主要介紹了關(guān)于element-ui的隱藏組件el-scrollbar的使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-05-05
  • gulp模塊使用方法示例詳解

    gulp模塊使用方法示例詳解

    這篇文章主要為大家介紹了gulp模塊使用方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09
  • vue實現(xiàn)一個炫酷的日歷組件

    vue實現(xiàn)一個炫酷的日歷組件

    公司業(yè)務(wù)新開了一個商家管理微信H5移動端項目,日歷控件是商家管理員查看通過日程來篩選獲取某日用戶的訂單等數(shù)據(jù)。下面小編給大家?guī)砹嘶趘ue實現(xiàn)一個炫酷的日歷組件,感興趣的朋友參考下吧
    2018-10-10
  • vue項目中使用axios上傳圖片等文件操作

    vue項目中使用axios上傳圖片等文件操作

    axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。這篇文章主要給大家介紹了vue項目中使用axios上傳圖片等文件操作,需要的朋友參考下吧
    2017-11-11
  • 解決cordova+vue 項目打包成APK應(yīng)用遇到的問題

    解決cordova+vue 項目打包成APK應(yīng)用遇到的問題

    這篇文章主要介紹了解決cordova+vue 項目打包成APK應(yīng)用遇到的問題,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-05-05

最新評論