element table组件内容换行的实现方案
作者：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;
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。