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 函数调用加括号与不加括号的区别
这篇文章主要介绍了vue 函数调用加括号与不加括号的区别,帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
2020-10-10
vuejs+element UI table表格中实现禁用部分复选框的方法
今天小编就为大家分享一篇vuejs+element UI table表格中实现禁用部分复选框的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
vue中使用 pinia 全局状态管理的实现
本文主要介绍了vue中使用 pinia 全局状态管理的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
vue使用引用库中的方法附源码
当vue使用库中的getvalue方法时，需要调用相关方法，通过定义ref=“”，使用this.$refs.exampleEditor._setValue('')，具体示例代码参考下本文，对vue使用引用库中的方法，感兴趣的朋友一起看看吧
2021-07-07
vue如何随心所欲调整el-dialog中body的样式
这篇文章主要介绍了vue如何随心所欲调整el-dialog中body的样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
在vue2中实现截图功能的基本步骤
在Vue 2中实现截图功能,可以使用HTML5的Canvas元素和一些JavaScript代码来捕获屏幕或特定元素的截图,以下是一个简单的步骤和示例代码来实现这个功能,需要的朋友可以参考下
2023-10-10
Vue大屏数据展示示例
公司的大数据工作组就需要通过数据大屏展示一些处理过后有价值的信息，本文主要介绍了Vue大屏数据展示示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
vue3+ant design的form数组表单校验方法
这篇文章主要介绍了vue3+ant design的form数组表单，如何校验,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2023-09-09
前端必知必会之Vue v-if指令详解
这篇文章主要介绍了前端必知必会之Vue v-if指令的相关资料,Vue中的条件渲染指令v-if、v-else-if和v-else用于根据条件动态创建HTML元素,通过使用比较运算符和逻辑运算符,可以编写复杂的条件逻辑,需要的朋友可以参考下
2025-02-02
el-menu弹出菜单样式不生效的问题及解决方法
这篇文章主要介绍了el-menu弹出菜单样式不生效的问题及解决方法,修改弹出框元素不在 el-menu 样式中,我们需要在 el-menu–popup 中修改样式,具体操作代码跟随小编一起看看吧
2024-07-07

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

目录

背景

解决方案

总结

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具