element table组件内容换行的实现方案

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

这篇文章主要介绍了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里的内容也进行换行，至少得看的清楚吧？

解决方案

直接将warnings数据源中的每一个元素的对象中的字段用split分割，再用join拼接\n换行符之后，希望它能够起作用。但是实际F12 DOM树中的文字看到是进行了换行，但是el-table的cell纹丝不动。

使<pre>的内容自动换行。<pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

先尝试使用：word-wrap: break-word;将内容自动换行，IE，OP，Chrome，Safari都可以，FF就悲剧了。

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

解决vue路由name同名,路由重复的问题
这篇文章主要介绍了解决vue路由name同名,路由重复的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
解决vue-cli webpack打包开启Gzip 报错问题
这篇文章主要介绍了vue-cli webpack打包开启Gzip 报错问题的解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-07-07
Vue计算属性中reduce方法实现遍历方式
这篇文章主要介绍了Vue计算属性中reduce方法实现遍历方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
vue使用技巧及vue项目中遇到的问题
这篇文章主要介绍了vue使用技巧及vue项目中遇到的问题,本文给大家带来的只是一部分，后续还会持续更新，感兴趣的朋友跟随脚本之家小编一起学习吧
2018-06-06
浅谈vue,angular,react数据双向绑定原理分析
本篇文章主要介绍了浅谈vue,angular,react数据双向绑定原理分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
Vue组件之全局组件与局部组件的使用详解
本篇文章主要介绍了Vue组件之全局组件与局部组件的使用详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
Vue3+Antd实现弹框显示内容并加入复制按钮
这篇文章主要介绍了Vue3+Antd实现弹框显示内容并加入复制按钮,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-12-12
Vue父子组件传值的三种方法
这篇文章主要介绍了Vue父子组件传值的三种方法，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-12-12
Vue3中的组合式 API示例详解
组合式 API 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件，这篇文章主要介绍了什么是Vue3的组合式 API,需要的朋友可以参考下
2022-06-06
Vue3之 Vue CLI多环境配置
这篇文章主要介绍了Vue3之 Vue CLI多环境配置，通俗点说就是使用配置文件来管理多环境，实现环境的切换，西阿棉详细内容,需要的朋友可以参考一下
2021-11-11