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 自定义提示框(Toast)组件的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了el-tree树状控件如何定位到选中的节点的位置,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-08-08
这篇文章主要介绍了vue3中vite使用sass的配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
本篇文章主要介绍了vue项目优化之通过keep-alive数据缓存的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
本文主要介绍了vue项目中如何配置env环境的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
本文主要介绍了Vue全局注册与局部注册两种组件注册的方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要为大家介绍了vue自定义横向滚动条css导航两行排列布局实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了Vue开发环境中修改端口号的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
最近刚好有个功能需要实现列表的无限循环滚动,这篇文章主要给大家介绍了关于vue组件实现列表自动无限循环的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue之bus总线的简单使用解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
最新评论