关于vue-elementui中单元格内换行问题解决

原文指路：https://www.cnblogs.com/leegent/p/9274424.html

需求：在渲染表格时，将两个字段渲染在同一个单元格内部，且换行区分显示。

思路：换行需要换行符，接口请求成功后，返回相关字段，添加换行符的方式是字符串拼接--+'\n'+,在vue中渲染相关字段值含有换行符的处理方式是Vue将其插值渲染成div内部文本后，文本并不换行，换行符显示为一个空格。主要就是将空白格识别为可换行即可。

解决：

1.使换行符功能正常，在换行符处正常换行。-----v-html

            将字符串里的\n替换为
，然后用v-html指令渲染字符串为innerHTML。就是用正常解析html标签的方式进行解析。

请求接口返回字段后进行处理

也就是说，在解析text时，使用的是解析HTML文件的方式，保证正确识别text中的网页元素标签。不过，在此之前，需要处理一下字段值。

2.基于vue中的识别机制，将\n解析为空白后，利用设置css属性，使空白处换行显示。

  white-space: pre-line;

请求接口成功后，取出字段拼接字符串

设置属性

white-space相关属性：

normal 默认。空白会被浏览器忽略。

nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。

pre-wrap 保留空白符序列，但是正常地进行换行。

pre-line 合并空白符序列，但是保留换行符。

inherit 规定应该从父元素继承 white-space 属性的值。