码迷,mamicode.com
首页 > 其他好文 > 详细

React+antd table中的每列内容换行

时间:2020-02-26 01:42:01      阅读:316      评论:0      收藏:0      [点我收藏+]

标签:its   data   contents   sdn   码代码   style   pre   文章   png   

1,效果图如下 

 技术图片

 

 

2,分隔数组split(",") 

3,详细代码代码如下 

const leadsDetails = this.props.leadsDetails;
const audits = JSON.stringify(leadsDetails) !== ‘[]‘ ? leadsDetails.audits : [];

const auditsColumns = [
{
title: ‘创建时间‘,
dataIndex: ‘created_at‘,
key: ‘created_at‘,
},
{
title: ‘用户‘,
dataIndex: ‘user‘,
key: ‘user‘,
},
{
title: ‘内容‘,
dataIndex: ‘content‘,
key: ‘content‘,
render: (text, record) =>{
let contentStr;
let br=<br></br>;
let result=null;
for(let i=0;i<audits.length;i++){
let contentStr=audits[i].content;
contentStr=text.toString().split(",");
if(contentStr.length<2){
return text;
}
for(let j=0;j<contentStr.length;j++){
if(j==0){
result=contentStr[j];
}else{
result=<span>{result}{br}{contentStr[j]}</span>;
}
}
return <div>{result}</div>;
}
},
},

 


 
————————————————
版权声明:本文为CSDN博主「小红同学5」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/xh_960125/article/details/89309547

React+antd table中的每列内容换行

标签:its   data   contents   sdn   码代码   style   pre   文章   png   

原文地址:https://www.cnblogs.com/ygunoil/p/12364891.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!