React前端库,table中的每列内容,进行强制换行的解决方法
1.问题描述:管理系统的前端实现用的是React+ant design,但是React的table,每列的值,如果用<br />或者/r/n 来实现,则还是换行无效。如下图,SN值是多个以分号分隔的值,现在希望多个sn值能分行显示,将分号替换成 <br />或者/r/n ,列值就变成了"value1 <br /&
·
1.问题描述:
管理系统的前端实现用的是React+ant design,但是React的table,每列的值,如果用<br />或者/r/n 来实现,则还是换行无效。如下图,SN值是多个以分号分隔的值,现在希望多个sn值能分行显示,将分号替换成 <br />或者/r/n ,列值就变成了"value1 <br />value2 " 或者"value1 /r/n value2",还是换行无效。也就是单元格换行无效。
2. 问题原因:
因为和其他的前端库不同,例如easyUI或者bootstrap,React中的table的单元格,利用后端返回的列值,直接替换字符串中的分隔符为<br>或者/r/n来换行,是无效的。
3.解决方法:
将前端代码的table的column代码中,要换行的那列,配置render属性,将标签<br></br>和每个显示值 混搭的方式,返回给列来显示(千万不能把标签放到引号里面,否则不识别其是标签)。
(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"); } }]
更多推荐
已为社区贡献2条内容
所有评论(0)