element table 组件内容换行方案

element table 组件内容换行方案

背景

临时接手了一个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组件中的数据源是直接给了一个对象,所以其实table中的每一个cell用户都不需要管。前端截图的接口,没有经过操作之后直接显示的效果是:

这里写图片描述

很难看对吧。所以想要把cell里的内容也进行换行,至少得看的清楚吧?

解决方案

  1. 直接将warnings数据源中的每一个元素的对象中的字段用split分割,再用join拼接\n换行符之后,希望它能够起作用。但是实际F12 DOM树中的文字看到是进行了换行,但是el-tablecell纹丝不动。
  2. 使<pre>的内容自动换行。<pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
  3. 先尝试使用:word-wrap: break-word;将内容自动换行,IE,OP,Chrome,Safari都可以,FF就悲剧了。
  4. 查看了pre的浏览器默认样式中真正起作用的是white-space: pre这一条。

看看white-space的值:

  • normal 默认。空白会被浏览器忽略。
  • pre 空白会被浏览器保留。其行为方式类似 HTML 中的<pre> 标签。
  • nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br>标签为止。
  • pre-wrap 保留空白符序列,但是正常地进行换行。
  • pre-line 合并空白符序列,但是保留换行符。
  • inherit 规定应该从父元素继承 white-space 属性的值。

按照我的需求,我希望它保留换行符。于是添加了样式:

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

这里写图片描述

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页