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

Mr. 柳上原

发布于 2019-02-25 14:14:26

2.2K0

发布于 2019-02-25 14:14:26

Author：Mr.柳上原

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

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

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',
       },
  ]

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019.01.10 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html