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

小红同学5

于 2019-04-15 12:19:50 发布

阅读量1.2w

点赞数 1

分类专栏： react antd

本文链接：https://blog.youkuaiyun.com/xh_960125/article/details/89309547

版权

react 同时被 2 个专栏收录

14 篇文章

订阅专栏

antd

8 篇文章

订阅专栏

本文介绍如何在React应用中使用antd库的表格组件实现每列内容自动换行的效果，通过分隔数组和调整代码实现表格数据的多行展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>;
 }
 },
},