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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于vue-elementui中单元格内换行问题解决相关的知识,希望对你有一定的参考价值。

参考技术A 原文指路: https://www.cnblogs.com/leegent/p/9274424.html

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

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

解决:

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

            将字符串里的\n替换为<br>,然后用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 属性的值。

以上是关于关于vue-elementui中单元格内换行问题解决的主要内容,如果未能解决你的问题,请参考以下文章

excel 如何删除单元格内数据后多余的空格和换行符

html表格里的单元格内容不能自动换行,求高手帮助解答!

解决 Element-ui中 表格(Table)单元格内换行转义符不起作用的问题

如何让一个单元格内容显示两行文字呢?

电子表格文字怎么换行?

JTable单元格自动换行