快捷導(dǎo)航

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

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

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

背景

臨時(shí)接手了一個(gè)element UI的前端項(xiàng)目，吐槽一下后臺(tái)接口，這個(gè)idCardNo字段。

項(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>

由于這個(gè)el-table組件中的數(shù)據(jù)源是直接給了一個(gè)對(duì)象，所以其實(shí)table中的每一個(gè)cell用戶都不需要管。

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

很難看對(duì)吧。所以想要把cell里的內(nèi)容也進(jìn)行換行，至少得看的清楚吧？

解決方案

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

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

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

查看了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;
}

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

Vue 實(shí)現(xiàn)輪播圖功能的示例代碼
Vue是一款流行的前端框架，它提供了一系列的工具和組件，使得開發(fā)者可以更加便捷地創(chuàng)建交互式的Web應(yīng)用程序，輪播圖是Web應(yīng)用程序中常見的一種交互式組件，本文將介紹如何使用Vue和第三方組件庫 Element UI實(shí)現(xiàn)輪播圖功能,需要的朋友可以參考下
2023-05-05
Vue使用CDN引用項(xiàng)目組件，減少項(xiàng)目體積的步驟
這篇文章主要介紹了Vue使用CDN引用項(xiàng)目組件，減少項(xiàng)目體積的步驟，幫助大家提高項(xiàng)目加載速度，感興趣的朋友可以了解下
2020-10-10
在vue中v-for循環(huán)遍歷圖片不顯示錯(cuò)誤的解決方案
這篇文章主要介紹了在vue中v-for循環(huán)遍歷圖片不顯示錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-01-01
通過npm引用的vue組件使用詳解
本文章通過實(shí)現(xiàn)一個(gè)vue-dialog的彈出層組件，然后附加說明如果發(fā)布此包到npm，且能被其他項(xiàng)目使用。本文給大家介紹的非常詳細(xì)，需要的的朋友參考下
2017-03-03
Vue組件間的雙向綁定示例解析
這篇文章主要介紹了Vue組件間的雙向綁定，我們都知道當(dāng)父組件改變了某個(gè)值后，如果這個(gè)值傳給了子組件，那么子組件也會(huì)自動(dòng)跟著改變，但是這是單向的，使用v-bind的方式，即子組件可以使用父組件的值，但是不能改變這個(gè)值
2023-03-03
vue中nextTick函數(shù)和react類似實(shí)現(xiàn)代碼
Vue 3 中的 nextTick 主要通過 Promise 實(shí)現(xiàn)異步調(diào)度,返回一個(gè) Promise 對(duì)象,這篇文章主要介紹了vue中nextTick函數(shù)和react類似實(shí)現(xiàn)代碼,需要的朋友可以參考下
2024-04-04
使用electron打包Vue前端項(xiàng)目的詳細(xì)流程
這篇文章主要介紹了使用electron打包Vue前端項(xiàng)目的詳細(xì)流程,文中通過圖文結(jié)合的方式給大家介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)electron打包Vue有一定的幫助,需要的朋友可以參考下
2024-04-04
Vue filter格式化時(shí)間戳?xí)r間成標(biāo)準(zhǔn)日期格式的方法
今天小編就為大家分享一篇Vue filter格式化時(shí)間戳?xí)r間成標(biāo)準(zhǔn)日期格式的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
ESLint在Vue3?+?TypeScript中的配置與使用方法
在Vue項(xiàng)目中配置ESLint,可以確保代碼風(fēng)格的一致性和代碼質(zhì)量,這篇文章主要介紹了ESLint在Vue3+TypeScript中配置與使用方法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-12-12
vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽的方法
這篇文章主要介紹了vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽,實(shí)現(xiàn)思路非常簡單內(nèi)容包括mata標(biāo)簽的特點(diǎn)和mata標(biāo)簽共有兩個(gè)屬性，分別是http-equiv屬性和name屬性，本文通過實(shí)例代碼給大家詳細(xì)講解需要的朋友可以參考下
2022-11-11