美文网首页菜鸟前端工程师
react-开发经验分享-Table表格组件里自定义表格td内容

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

作者: Mr柳上原 | 来源:发表于2019-01-10 15:07 被阅读1次

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

相关文章