react-开发经验分享-Table表格组件里自定义表格td内容换行

Author：Mr.柳上原

• 付出不亚于任何的努力
• 愿我们所有的努力，都不会被生活辜负
• 不忘初心，方得始终

ant框架里，Table表格组件里自定义表格td内容换行的方法 在Table表格里，无法像普通原生html一样直接在标签内使用‘br’或换行符使表格内容换行 必须在表格组件的columns方法里对需要换行的地方使用render自定义换行， 使用方法如下：

代码语言：javascript复制

columns = [
  {
       title: '驻场',
          // 子单元格
          children: [
              {
                 title: '驻场姓名',
                 width: 120,
                 dataIndex: 'nameData',
                 key: 'nameData',
                 align: 'center',
                 // 自定义表格换行方法
                 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: '驻场电话',
                    width: 160,
                    dataIndex: 'phoneData',
                    key: 'phoneData',
                    align: 'center',
               },
           ],
           align: 'center',
       },
  ]

html ant render table 表格

0 人点赞