目录
背景
解决方案
总结
背景
临时接手了一个element UI的前端项目，吐槽一下后台接口，这个idCardNo字段。
项目直接使用了
el-table
组件：
查看
由于这个el-table组件中的数据源是直接给了一个对象，所以其实table中的每一个cell用户都不需要管。
前端截图的接口，没有经过操作之后直接显示的效果是：
很难看对吧。所以想要把cell里的内容也进行换行，至少得看的清楚吧？
解决方案
直接将warnings数据源中的每一个元素的对象中的字段用split分割，再用join拼接\n换行符之后，希望它能够起作用。但是实际F12 DOM树中的文字看到是进行了换行，但是el-table的cell纹丝不动。
使的内容自动换行。元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 先尝试使用：word-wrap: break-word;将内容自动换行，IE，OP，Chrome，Safari都可以，FF就悲剧了。 查看了pre的浏览器默认样式中真正起作用的是white-space: pre这一条。 看看white-space的值： normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的标签。 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。 pre-wrap 保留空白符序列，但是正常地进行换行。 pre-line 合并空白符序列，但是保留换行符。 inherit 规定应该从父元素继承 white-space 属性的值。 按照我的需求，我希望它保留换行符。 于是添加了样式：.el-table .cell { white-space: pre-line; }总结 以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。 您可能感兴趣的文章: Element中table组件(el-table)右侧滚动条空白占位处理 ElementUI中el-table表格组件如何自定义表头 使用element-ui设置table组件宽度(width)为百分比 element-ui el-dialog嵌套table组件,ref问题及解决 vue element-ui el-table组件自定义合计(summary-method)的坑