腳本之家服務器常用軟件

快捷導航

element table組件內容換行的實現(xiàn)方案

更新時間：2023年12月06日 16:57:17 作者：stu_yiliang

這篇文章主要介紹了element table組件內容換行的實現(xiàn)方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

背景

臨時接手了一個element UI的前端項目，吐槽一下后臺接口，這個idCardNo字段。

項目直接使用了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用戶都不需要管。

前端截圖的接口，沒有經過操作之后直接顯示的效果是：

很難看對吧。所以想要把cell里的內容也進行換行，至少得看的清楚吧？

解決方案

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

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

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

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

看看white-space的值：

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

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

于是添加了樣式：

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

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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

element table組件內容換行的實現(xiàn)方案

目錄

背景

解決方案

總結

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具