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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券