React前端库，table中的每列内容，进行强制换行的解决方法

1.问题描述：

管理系统的前端实现用的是React+ant design，但是React的table，每列的值，如果用 或者/r/n 来实现，则还是换行无效。如下图，SN值是多个以分号分隔的值，现在希望多个sn值能分行显示，将分号替换成 或者/r/n ，列值就变成了"value1 value2 " 或者"value1 /r/n value2"，还是换行无效。也就是单元格换行无效。

2. 问题原因：

因为和其他的前端库不同，例如easyUI或者bootstrap，React中的table的单元格，利用后端返回的列值，直接替换字符串中的分隔符为 或者/r/n来换行，是无效的。

3.解决方法：

将前端代码的table的column代码中，要换行的那列，配置render属性，将标签 和每个显示值混搭的方式，返回给列来显示（千万不能把标签放到引号里面，否则不识别其是标签）。

（1）截图如下：

（2）代码如下：

columns: [{title: '服务器IP',dataIndex: 'ip',}, {title: 'SN',dataIndex: 'sn',render: (text, record) =>{let snArray=[];snArray=text.split(";");let br=<br></br>;let result=null;if(snArray.length<2){return text;}for(let i=0;i<snArray.length;i++){if(i==0){result=snArray[i];}else{result=<span>{result}{br}{snArray[i]}</span>;}}return <div>{result}</div>;}}, {title: '服务',dataIndex: 'pathName'
  }, {title: '级别',dataIndex: 'priority',render: function (data) {if (data === 0) {return <Badge status="error" text="Critic"/>} else {return <Badge status="warning" text="Warning"/>;}}}, {title: '创建时间',dataIndex: 'creatDate',render: function (data) {return moment(data).format("YYYY-MM-DD HH:mm:ss");}}]

React前端库，table中的每列内容，进行强制换行的解决方法相关推荐

合并table中某一列相邻的相同的行
合并table中某一列相邻的相同的行 1. [代码]合并table中某一列相邻的相同的行 <!DOCTYPE html> <html> <head> ...
如何隐藏table 中的指定列？
欢迎关注博主公众号:[纯洁的明依]文章由陈晓阳原创. 本人微信:chenxiaoyangzxy. 免费提供本人大量学习资料. 如何隐藏table 中的指定列?当页面需要显示的内容太多,而页面宽度又不够 ...
htmltd文本自动换行,完美解决table中td里面的内容自动换行
完美解决table中td里面的内容自动换行2018-08-03 11:50 对于将td里面的内容自动换行,在很久以前就遇到的了,但是一直没有完美的解决. 今天要打印一个报表,有一列中的内容太长,将ta ...
excle中根据两列内容匹配第三列数据
excle中根据两列内容匹配第三列数据根据AB两列找EF两列的对应的C列的值 I3输入公式: =INDEX($C$3:$C$482,MATCH(E3&F3,$A$3:$A$482& ...
mysql表中的中文是乱码_mysql插入表中的中文显示为乱码或问号的解决方法
版权声明:本文为博主原创文章,未经博主允许不得转载. 今天在做ssh的博客项目时发现mysql数据库中的中文显示为问号,网上查阅了很多资料,都不是很全,所以我总结一下,供大家参考和自己复习. 1.我的 ...
JQuery中使用Ajax赋值给全局变量失败异常的解决方法，jqueryajax
我们在用JQuery的Ajax从后台提取数据后想把它赋值给全局变量,但是却怎么都赋不进,为什么呢? 原因其实很简单,我们用的Ajax是异步操作,也就是说在你赋值的时候数据还没提取出来,你当然赋不进去, ...
使用 ADOX 将 Table 添加到 Catalog 时报“类型无效”的原因和解决方法
http://blog.csdn.net/kfhzy/article/details/6020283 http://blog.csdn.net/kfhzy/article/details/602054 ...
mysql5.7.20 sql mode_MySQL5.7中的sql_mode默认值带来的坑及解决方法
在正常项目开发过程中,如果MySQL版本从5.6升级到5.7版本.作为DBA在考虑数据库版本升级带来的影响时,一般会有几个注意点: sql_mode optimizer_switch 本文主要内容是M ...
mac php pear,OSX EI Captain中安装Pear等三方软件不成功的解决方法
OSX EI Captain中安装Pear等三方软件不成功的解决方法发布于 2015-12-03 21:24:06 | 1238 次阅读 | 评论: 1 | 来源: PHPERZ PEAR PHP扩 ...

React前端库，table中的每列内容，进行强制换行的解决方法

React前端库，table中的每列内容，进行强制换行的解决方法相关推荐

最新文章

热门文章